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

css3动画 --- Animation和Transition

时间:2019-09-26 18:42:02      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:动画   应用   序列   alternate   --   running   css   https   org   

Animation

animation属性是以下属性的一个简写属性形式。

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

初始值

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

animation-name属性指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列。

 

 

 

一个圆球的不同animation!

animation: slidein 3s ease-in 1s infinite reverse both running;
animation: slidein 3s linear 1s infinite running;
animation: slidein 3s linear 1s infinite alternate;
animation: slidein .5s linear 1s infinite alternate;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文:https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

 

css3动画 --- Animation和Transition

标签:动画   应用   序列   alternate   --   running   css   https   org   

原文地址:https://www.cnblogs.com/xjy20170907/p/11593564.html

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