欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3动画animation和@keyframes

程序员文章站 2022-03-16 16:48:40
...

1. animation

CSS 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 duration timing-function delay iteration-count direction fill-mode play-state;
属性
/* 所有动画属性的简写属性  */
animation 

/* 规定 @keyframes 动画的名称 */
animation-name	

/* 规定动画完成一个周期所花费的秒或毫秒。默认是 0s */
animation-duration	

/* 规定动画的速度曲线。默认是 "ease" */
animation-timing-function	/* linear|ease|ease-in-out(	动画以低速开始和结束)|step-start|step-end */

/* 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式 */
animation-fill-mod /* none|forwards|backwards|both|initial|inherit; */

/* 规定动画何时开始。默认是 0 */
animation-delay

/* 规定动画被播放的次数。默认是 1 */
animation-iteration-count /* infinite | <number> */

/* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
animation-direction /* normal | reverse | alternate(动画交替反向运行) | alternate-reverse */

/* 规定动画是否正在运行或暂停。默认是 "running" */
animation-play-state /* running | paused */

2. @keyframes

@keyframes 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。
在动画过程中,您可以更改CSS样式的设定多次。
指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。(from相当于0%, to相当于100%)

.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}
    
@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  50% {
    margin-left:10% !important; /* 关键帧中出现的 !important 关键词将会被忽略 */
    width:30%
  }
  to {
    margin-left:0%;
    width:100%;
  }
}
相关标签: CSS