• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • @keyframes

    版本:CSS3

    关键帧@keyframes at-rule 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。和转换 transition 相比,关键帧 keyframes 可以控制动画序列的中间步骤。

    示例

    @keyframes slidein {
      from {
        transform: translateX(0%); 
      }
    
      to {
        transform: translateX(100%);
      }
    }
    

    JavaScript 可以通过 CSS对象模型接口CSSKeyframesRule来访问@keyframes

    要使用关键帧,先创建一个带名称的@keyframes规则,以便后续使用animation-name这个属性来将一个动画同其关键帧声明匹配。每个@keyframes规则包含多个关键帧,也就是一段样式块语句,每个关键帧有一个百分比值作为名称,代表在动画进行中,在哪个阶段触发这个帧所包含的样式。

    您可以按任意顺序列出关键帧百分比;他们将按照其应该发生的顺序来处理。

    让关键帧序列生效

    如果一个关键帧规则没有指定动画的开始或结束状态(也就是,0%/from100%/to,浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画,最终返回初始状态。

    如果在关键帧的样式中使用了不能用作动画的属性,那么这些属性会被忽略掉,支持动画的属性仍然是有效的,不受波及。

    重复定义(Duplicate resolution)

    如果多个关键帧使用同一个名称,以最后一次定义的为准。@keyframes不存在层叠样式(cascade)的情况,所以动画在一个时刻(阶段)只会使用一个的关键帧的数据。

    如果一个@keyframes 里的关键帧的百分比存在重复的情况,以最后一次定义的关键帧为准。因为@keyframes的规则不存在层叠样式(cascade)的情况,即使多个关键帧设置相同的百分值也不会全部执行。

    属性个数不定

    如果一个关键帧中没有出现其他关键帧中的属性,那么这个属性将使用插值(不能使用插值的属性除外,这些属性会被忽略掉)。例如:

    @keyframes identifier {
      0% { top: 0; left: 0; }
      30% { top: 50px; }
      68%, 72% { left: 50px; }
      100% { top: 100px; left: 100%; }
    }
    

    例子中,"top"属性分别出现在0%,30%100%的关键帧中,"left"属性分别出现在0%,68%100%关键帧中.

    当关键帧被重复定义

    如果某一个关键帧出现了重复的定义,且重复的关键帧中的css属性值不同,以最后一次定义的属性为准。例如:

    @keyframes identifier {
      0% { top: 0; left: 0px}
      50% { top: 30px; left: 20px; }
      50% { top: 10px; }
      100% { top: 0; left: 30px;}
    }
    

    上面这个例子中,50%关键帧中设置的属性top: 10px是有效的,但是其他的属性会被忽略

    层叠样式(cascade)的特性从Firefox 14版本开始可以使用了。拿上面的例子来说,对于50%关键帧,left: 20px这个值不会被忽略掉。目前这种特性还没写入规范,但是已经在探讨中了。

    关键帧中的!important 关键词

    关键帧中出现的!important 关键词将会被忽略

    @keyframes important1 {
      from { margin-top: 50px; }
      50%  { margin-top: 150px !important; }
     /* 忽略 */
      to   { margin-top: 100px; }
    }
    
    @keyframes important2 {
      from { margin-top: 50px;
             margin-bottom: 100px; }
      to   { margin-top: 150px !important; /* 忽略 */
             margin-bottom: 50px; }
    }
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持@keyframes

    语法

    @keyframes<custom-ident>{from| to| <percentage>}

    取值

    • <custom-ident>:帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。
    • from:等价于 0%。
    • to:等价于 100%。
    • <percentage>:动画序列中触发关键帧的时间点,使用百分值来表示。

    实例

    @keyframes指定动画名称和动画效果。通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。

    @keyframes slidein {
      from {
        margin-left:100%;
        width:300%;
      }
    
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @keyframes testanimations { from { opacity: 1; } to { opacity: 0; } }
    

    其中testanimations是该动画的名字,该动画表示某个东西将逐渐消失。

    如果复杂的动画,可以混合<percentage>去设置某个时间段内的任意时间点的样式:

    @keyframes testanimations {
    	from { transform: translate(0, 0); } 
    	20% { transform: translate(20px, 20px); } 
    	40% { transform: translate(40px, 0); } 
    	60% { transform: translate(60px, 20); } 
    	80% { transform: translate(80px, 0); } 
    	to { transform: translate(100px, 20px); } 
    }
    

    当然,也可以不使用关键字from和to,而都使用<percentage>:

    @keyframes testanimations{ 
    	0% { transform: translate(0, 0); } 
    	20% { transform: translate(20px, 20px); } 
    	40% { transform: translate(40px, 0); } 
    	60% { transform: translate(60px, 20px); } 
    	80% { transform: translate(80px, 0); } 
    	100% { transform: translate(100px, 20px); } 
    }
    

    注意,这里的0%不能简写成0,0是非标准语法(虽然被某些浏览器所支持)。

    上篇:@font-face