一:动画属性参数的详解
简介
CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。
语法
animation
所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name
规定 @keyframes 动画的名称。就是@keyframes后面跟着的动画名称。
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function
规定动画的速度曲线。默认是 "ease"。
常见的动画速度参数:
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
规定动画何时开始。默认是 0。也即是指动画延时执行时间。
animation-iteration-count
规定动画被播放的次数。默认是 1。当然,我们可以设置2次,3次,依次递推。还有个无线循环关键字
animation-direction
规定动画是否在下一周期逆向地播放。默认是 "normal"。当然还有下列值:
reverse :反方向运行
alternate :动画先正常运行再反方向运行,并持续交替运行
alternate-reverse :动画先反运行再正方向运行,并持续交替运行
animation-fill-mode
规定对象动画时间之外的状态。
none :默认值。不设置对象动画之外的状态
forwards :设置对象状态为动画结束时的状态
backwards :设置对象状态为动画开始时的状态
both :设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧;动画完成之后是"to"或"100%"关键帧状态。
animation-play-state
规定动画是否正在运行或暂停。默认是
二:实例
动画实例一:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 1 h2{ 2 width:100px; 3 height:100px; 4 background:blue; 5 position:absolute; 6 left:0;top:0; 7 /* 用animation 调用关键帧 */ 8 animation:h2Move 3s infinite; 9 } 10 11 .box:hover h2{ 12 /* 鼠标滑过动画暂定 */ 13 animation-play-state:paused; 14 } 15 16 /* 制定关键帧 */ 17 @keyframes h2Move{ 18 0%{ 19 left:0;top:0; 20 } 21 25%{ 22 left:700px;top:0; 23 } 24 50%{ 25 left:700px;top:400px; 26 } 27 75%{ 28 left:0;top:400px; 29 } 30 100%{ 31 left:0;top:0; 32 } |
动画实例二:
结合animation与transform的结合(旋转3D立方体效果)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .box{ width:300px; height:300px; position:fixed; left:0;right:0; top:0;bottom:0; margin:auto; transform-style: preserve-3d; transform:rotateX(20deg) rotateY(30deg); transition:2s; animation: boxMove 5s linear infinite; } @keyframes boxMove{ 0%{ transform:rotateX(0) rotateY(0); } 100%{ transform:rotateX(360deg) rotateY(360deg); } } |
源码地址 https://pan.baidu.com/s/1gnM7VjFgyM1ZU1agPXFKjQ 提取码:zhqp