CSS3动画详解-CSDN博客

本文链接：https://blog.csdn.net/a736889661/article/details/79162500

以前学的时候也了解过css3动画，但是总感觉有点会又不会的样子，今天记录一下

css3动画最主要的是

CSS3 @keyframes 规则: IE9版本及低版本不兼容

如果动画改变的少可以直接

这里的myfirst是动画的名字

@keyframes myfirst {

from{background:red;}

to{background:yellow;}

}

@-webkit-keyframes myfirst/* Safari 与 Chrome */{

from{background:red;}

to{background:yellow;}

}

其实from和to相当于0%和100%，如果样式变化的多可以这样子写

@keyframes myfirst{

0%{background:red;}

50%{background:blue;}

100%{background:yellow;}

}

@-webkit-keyframes myfirst/* Safari 与 Chrome */{

0%{background:red;}

50%{background:blue;}

100%{background:yellow;}

}

如果你要是想启用这个动画需要启动器

animation

animation:名字时间;

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

运行myfirst动画，设置所有的属性：

  div
  
  {
  
   animation-name:
  
  myfirst
  
  ;
 
   animation-duration:
  
  5
  s
  
  ;
 
   animation-timing-function:
  
  linear
  
  ;
 
   animation-delay:
  
  2
  s
  
  ;
 
   animation-iteration-count:
  
  infinite
  
  ;
 
   animation-direction:
  
  alternate
  
  ;
 
   animation-play-state:
  
  running
  
  ;
 
  /*
   Safari 与 Chrome:
  */
  
   -
  webkit-animation-name:
  
  myfirst
  
  ;
 
   -
  webkit-animation-duration:
  
  5
  s
  
  ;
 
   -
  webkit-animation-timing-function:
  
  linear
  
  ;
 
   -
  webkit-animation-delay:
  
  2
  s
  
  ;
 
   -
  webkit-animation-iteration-count:
  
  infinite
  
  ;
 
   -
  webkit-animation-direction:
  
  alternate
  
  ;
 
   -
  webkit-animation-play-state:
  
  running
  
  ;
 
  }
 
与上面的动画相同，但是使用了简写的动画 animation 属性：

    div
    
    {
    
     animation:
    
    myfirst
    
    5
    s
    
    linear
    
    2
    s
    
    infinite
    
    alternate
    
    ;
   
    /*
     Safari 与 Chrome:
    */
    
     -
    webkit-animation:
    
    myfirst
    
    5
    s
    
    linear
    
    2
    s
    
    infinite
    
    alternate
    
    ;
   
    }