@keyframes—定义动画关键帧
生活随笔
收集整理的這篇文章主要介紹了
@keyframes—定义动画关键帧
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
@keyframes用來定義動畫名和關鍵幀,其語法規則如下
@keyframes run {0% {//有動畫性質的屬性的改變情況}25% {}50% {}75% {}100% {} }即將動畫執行的過程分為若干段,在每一段中定義該段中最后一幀的元素的狀態
【注】
1.其百分比必須從0%-100%,表示元素運動的第一幀到最后一幀(不要忘了百分號)
2.0%和100%分別可以用from和to代替
3.每段動畫執行的時間按照關鍵幀分配的比例在總時間內劃分,比如動畫執行總時間為4s,則0%-25%這一過程占用1s
@keyframe與animation配合使用, 因此下一節再舉例子吧
總結
以上是生活随笔為你收集整理的@keyframes—定义动画关键帧的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 贝塞尔曲线 cubic-bezier()
- 下一篇: 1分钟深入了解CSS3的动画属性anim