标签:http move article eps ade anim https margin 次数
一:动画属性参数的详解
简介
CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。
语法
<‘ animation-name ‘>
:检索或设置对象所应用的动画名称 <‘ animation-duration ‘>
:检索或设置对象动画的持续时间 <‘ animation-timing-function ‘>
:检索或设置对象动画的过渡类型 <‘ animation-delay ‘>
:检索或设置对象动画延迟的时间 <‘ animation-iteration-count ‘>
:检索或设置对象动画的循环次数 <‘ animation-direction ‘>
:检索或设置对象动画在循环中是否反向运动 <‘ animation-fill-mode ‘>
:检索或设置对象动画时间之外的状态 <‘ animation-play-state ‘>
:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式
规定 @keyframes 动画的名称。就是@keyframes后面跟着的动画名称。
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
规定动画的速度曲线。默认是 "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(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
规定动画何时开始。默认是 0。也即是指动画延时执行时间。
规定动画被播放的次数。默认是 1。当然,我们可以设置2次,3次,依次递推。还有个无线循环关键字infinite
,也即是反复循环播放动画。
规定动画是否在下一周期逆向地播放。默认是 "normal"。当然还有下列值:
reverse
:反方向运行
alternate
:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse
:动画先反运行再正方向运行,并持续交替运行
规定对象动画时间之外的状态。
none
:默认值。不设置对象动画之外的状态
forwards
:设置对象状态为动画结束时的状态
backwards
:设置对象状态为动画开始时的状态
both
:设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧;动画完成之后是"to"或"100%"关键帧状态。
规定动画是否正在运行或暂停。默认是 "running"
。还有个值paused
:暂停。
二:实例
动画实例一:
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立方体效果)
.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
标签:http move article eps ade anim https margin 次数
原文地址:https://www.cnblogs.com/007-cj/p/12392880.html