码迷,mamicode.com
首页 > Web开发 > 详细

css动画

时间:2019-12-10 17:23:26      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:应该   size   ali   direct   ansi   暂停   margin   曲线   延迟   

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指定动画是否正在运行或已暂停
 
 
 
 
 
 
 

css动画

标签:应该   size   ali   direct   ansi   暂停   margin   曲线   延迟   

原文地址:https://www.cnblogs.com/huronghua/p/12017507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!