animation动画属性

@keyframes 规定动画

 animation  所有的属性简写属性,除了animation-play-state属性

animation-name  规定@keyframes 动画的名称

animation-duration规定动画周期所花费的秒或毫秒

animation-timing-function规定动画速度曲线

animation-play-state规定动画是否正在运行或者暂停

animation-delay 规定动画何时开始

animation-iteration-count规定动画被播放的次数

animation-direction规定动画是否在下一周期逆向地播放

animation-fill-mode规定对象动画时间之外的状态

linear    动画从头到尾的速度是相同的。


animation-timing-function:规定动画速度曲线

ease  默认值。动画以低速开始,然后加快,在结束前变慢。

ease-in  动画以低速开始。

ease-out  动画以低速结束。

ease-in-out  动画以低速开始和结束。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在CSS3中,有一个新的属性可以用来做一些简单的动画效果,这就是animation,中文意思就是动画。 一、首先我...
    大春春阅读 3,434评论 1 9
  • 2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...
    Zd_silent阅读 478评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,421评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,101评论 0 2
  • 转换(transform) 如大家了解的一样,转换分为2D转换和3D转换。利用CSS3的转换功我们能够对元素进行移...
    HappyAdu阅读 1,776评论 0 3

友情链接更多精彩内容