CSS自定义动画

时间:2022-05-30 08:04:02

 动画名称  animation-name   :   (动画名称必须与@keyfarmes的名称相对应,因为动画名称是由@keyfarmes定义的) 例如:animation-name:AA;则 @keyfarmes AA 也为该名称。

关键帧  @keyfarmes    :   关键帧则是给动画 (从from开始 到 to结束) 的一些效果。 例如:@-webkit-keyfarmes AA{0%{margin-left:0px; radius:0px; height:0px;}  100%{margin-left:300px; radius:50%; height:200px;}  这里加上-webkit则开始到结束就要换成百分比0%到100%,直接使用@keyfarmes就要使用from到to。

   动画时间  animation-duration    :动画发生到结束的时间  例如: .div{ animation-duration:1s;}

   动画的过渡速度  animation-timing-function   : 动画运作的快慢方式    有以下5种:linear从开始到结束速度都是一样的,ease开始低速然后加快结束低速,ease-in开始时是低速,ease-out结束时是低速,ease-in-out开始和结束时是低速。 例如:.div{animation-timing-function:ease-in;}。

   动画延迟时间  animation-delay   : 延缓动画开始的时间    例如: .div{animation-delay:2s;}  这则是两秒之后开始。

   动画执行次数  animation-iteration-count   : 动画重复开始的次数    infinite表示无数次  例如: .div{animation-iteration-count:2;}这则表示重复两次。

   动画顺序   animation-direction    :动画运作时的正反顺序    有以下4种:normal 正常方向,reverse 反方向,alternate先正再反  并持续交替,alternate-reverse 先反再正 并持续交替。   例如: .div{animation-direction:alternate;}

   动画的状态   animation-liay-state    : 动画运行是的状态  有以下两种:running 运动,paused 暂停 这个适用于hover这个选择符。 例如:.div:hover{animation-play-state:paused;}  鼠标指向时就暂停。

   动画时间之外的状态   animation-fill-mode  :(不能设置动画执行次数为无数次,则该样式不会出现效果)动画结束后的状态 有以下4种 :none 无,forward 动画结束(to里面的所有样式)时的状态,backward 动画开始(from里面的所有样式)时的状态,both 动画开始或者结束时的状态。 例如 .div{anination-fill-state:forward;}

   动画复合属性    animation   : 复合属性可以把动画的属性都综合在animation里  例如: .div{animation: AA 1s 1s 2 alternate backward;} 这样比较便捷。