css动画

waterv 2019-12-10

css动画

使用css实现动画有两种方式,animation和transition。

一.transition(过渡)
它有四个属性:
transition-property规定设置过渡效果的 CSS 属性的名称
 transition-duration规定完成过渡效果需要多少秒或毫秒
 transition-timing-function规定速度效果的速度曲线
 transition-delay定义过渡效果何时开始
初学css时,比较容易混淆transform(变形)、transition(过渡)、translate(移动)。transform(变形)是CSS3中的元素的属性,而translate只是transform的一个属性值;transform可以设置为transition(过渡动画)的transition-property的一个属性值。
 
二.animation
animation属性结合@ keyframes使用, animation中的animation-name需要设置成@ keyframes的name一致。
animation-name规定需要绑定到选择器的 keyframe 名称
 animation-duration规定完成动画所花费的时间,以秒或毫秒计
 animation-timing-function规定动画的速度曲线
 animation-delay规定在动画开始之前的延迟
 animation-iteration-count规定动画应该播放的次数
 animation-direction规定是否应该轮流反向播放动画
 animation-play-state规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
 animation-fill-mode指定动画是否正在运行或已暂停
 
 
 
 
 
 
 

相关推荐

aSuncat / 0评论 2020-08-18