web动画-animation属性

1.想要做一个动画最基本的是要满足三要素*

(1)animation-name: 名字;     用于给你的动画起一个名字

(2)animation-duration:2s;用于给你的动画规定一个时间

(3)@keyframes 名字{}

2.动画扩展

(4)animation-delay:2s;延时2s执行动画

(5)anmation-timing-function:linear;动画的运动曲线

(6)animation-iteration-count:3;动画的循环次数(infinite无限循环)

(7)animation-direction:alternate;动画是否往返操作

(8)animation-play-static:paused;动画暂停配合hover使用

例:.box:hover{animation-play-static:paused;}当鼠标放到.box盒子上的时候动画暂停

3.animation的连写

animation:名称   时间   曲线   延迟   次数   是否往返

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,763评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,818评论 0 11
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 5,841评论 0 4
  • 在CSS3中,有一个新的属性可以用来做一些简单的动画效果,这就是animation,中文意思就是动画。 一、首先我...
    大春春阅读 8,571评论 1 9
  • 【chapter 1】 位于山西北部的大同素有“三代京华,两朝重镇”之称,为人熟知的还...
    三丁目就是我呀阅读 3,952评论 0 4