通过css制作animate动画

原创 cylWEB 教程 html/css 103阅读 2019-03-04 14:35:57 举报

在需要动画的元素上添加  animation class名,然后给其设置值来实现动画

第一步 : 根据属性设置自己所需要的值

属性详情 :

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间,以秒或毫秒计。

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

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

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

    ease-in  动画以低速开始。

    ease-out 动画以低速结束。

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

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

animation-delay  规定在动画开始之前的延迟。

animation-iteration-count  规定动画应该播放的次数。

    n  定义动画播放次数的数值。

    infinite 规定动画应该无限次播放。

animation-direction  规定是否应该轮流反向播放动画。

    normal 默认值。动画应该正常播放。  

    alternate  动画应该轮流反向播放。

 

第二步 :

根据需求开始写运动轨迹,如

 

注意 :

@keyframes 需要添加兼容性

@-webkit-keyframes

@-moz-keyframes

@-ms-keyframes

@-o-keyframes

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复