美文网首页
web动画-animation属性

web动画-animation属性

作者: 柠檬糖 | 来源:发表于2016-12-05 20:42 被阅读0次

    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:名称   时间   曲线   延迟   次数   是否往返

    相关文章

      网友评论

          本文标题:web动画-animation属性

          本文链接:https://www.haomeiwen.com/subject/jrrlmttx.html