<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{padding:0margin:0border:0}
.left{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
}
.right{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
animation-delay: 5s/* W3C 和 Opera */
-moz-animation-delay: 5s/* Firefox */
-webkit-animation-delay: 5s/* Safari 和 Chrome */
}
@keyframes myfirst
{
0% { opacity:0}
100% { opacity:1}
}
@-moz-keyframes myfirst /* Firefox */
{
0% { opacity:0}
100% { opacity:1}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% { opacity:0}
100% { opacity:1}
}
@-o-keyframes myfirst /* Opera */
{
0% { opacity:0}
100% { opacity:1}
}
</style>
</head>
<body>
<div>
<div class="left"><img src="images/xxx.jpg"></div>
<div class="right">文字XXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</body>
</html>
你的采纳是我前进的动力，还有不懂的地方，请你继续“追问”！
如你还有别的问题，可另外向我求助；答题不易，互相理解，互相帮助！
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
熟悉Photoshop的同学就应该知道什么叫“贝塞尔曲线”（即cubic-bizier），这是计算机中绘制精确平滑曲线的方法，具体你可以去查百度百科，这里一两句话解析不清。而CSS中的cubic-bizier则是一种特殊的贝塞尔曲线，即它的两个端点的坐标是固定的，起点为(0,0)，终点为(1,1)，有变化的是它们的控制点的坐标，而四个n的前两个n是起点的控制点坐标，后两个n是终点的控制点坐标，它们的取值范围都在0和1之间（包含0和1）。这里的贝塞尔曲线其实是一种时间曲线，横坐标是动画走过的时间轴，纵坐标是动画移动的距离，通过改变曲线的形状，就可以控制动画移动过程中的速度快慢变化，从而实现各种不同的效果。
其实实际css应用中很少用到cubic-bizier函数来计算曲线，只需直接利用预设值即linear、ease、ease-in、ease-out、ease-in-out就是达到目的了。
