首先是结构代码
2.
然后是关键帧动画定义
其中的百分比是对应在先对时间会发生的事情
例如我让它在进行的50%时位移至X轴250像素Y轴250像素
还有一个关键的就是必须有开始和结束也可以用英文单词
接下来时效果展示
0%和100%
25%
50%
75%
动画过渡 transition
transition是一个复合属性,包含一下几个子属性:
transition-property:指定过渡或动态模拟的CSS属性;
transition-duration:指定过渡完成所需的时间;
transition-timing-function:指定过渡函数;
transition-delay:指定开始出现的延迟时间;
调用动画
animation是一个复合属性,包含一下几个子属性:
Ø animation:animation-name;(调用动画)
Ø animation-duration (动画播放时间)
Ø animation-timing-function (动画播放方式)
Ø animation-delay (动画开始播放时间)
Ø animation-iteration-count (动画播放次数)infinite(无限);n(具体次数)
Ø animation-direction (动画播放方向) 两个参数值:
Ø normal 每次循环都是向前播放;alternate 奇数次向前播放,偶数次反方向播放;
Ø animation-play-state (动画播放状态)
Ø 两个值:running & paused
Ø running类似于音乐播放器,paused是将播放的动画停下来;
Ø running将暂停的动画重新播放,是从暂停位置开始播放,另外就是重新播放;
animation-fill-mode
(动画时间外属性)四个属性值:
none:默认,动画按预期进行,在动画完成最后一帧时,会反转到初始帧;
forwards:动画结束后应用最后的关键帧;
backwards:是迅速应用动画初始帧,主要体现在动画开始之前;
both:forwards和backwards的结合,开始前会用初始帧,结束后会继续用最后的关键帧;