css3动画 --- Animation和Transition

Posted 2022-12-05 xjy20170907

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