在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题。CSS3 的出现,让动画变得更加容易,性能也更加好。
animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态,整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道,这种逐帧动画是由关键帧组成,很多个关键帧连续的播放就组成了动画,在 CSS3 中是由属性keyframes来完成逐帧动画的。
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
/*animationName:动画名称;
percentage:为百分比值,可以添加多个百分比值;
properties:样式属性名称,例如:color、left、width等等。*/
animation有八个属性
animation-name 动画名称
animation-duration 动画的持续时间
animation-timing-function 对象动画的过渡类型
取值
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
steps([, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
cubic-bezier(, , , ):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
animation-delay 对象动画延迟的时间
animation-iteration-count 对象动画的循环次数
取值
infinite:无限循环
数字:指定对象动画的具体循环次数
animation-direction 循环中是否反向运动
取值
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
animation-play-state 动画的状态
取值
running:运动
paused:暂停
animation-fill-mode 动画时间之外的状态
取值
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态
举个例子
效果就是盒子按四个角度移动,最后回到起点
div{
width: 100px;
height: 100px;
border-radius: 50%;
animation: sun 20s linear 1s infinite alternate;/*这里写的就是animation的属性值*/
/*也可以写成这样这几个都是常用的*/
animation-name:sun;
animation-duration:20s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes sun{
/*这个里面可以只写0%||100% 还可以写成from||to这两个就代表0和100还可以写成下面这些*/
0%{
margin-left: 0px;
margin-top: 0px;
background-color: salmon;
}
25%{
margin-left: 500px;
margin-top: 0px;
background-color: chartreuse;
}
50%{
margin-left: 500px;
margin-top: 500px;
background-color: khaki;
}
75%{
margin-left: 0px;
margin-top:500px;
background-color: turquoise;
}
100%{
margin-left: 0px;
margin-top: 0px;
background-color: salmon;
}
}