码迷,mamicode.com
首页 > Web开发 > 详细

css3中的 @Keyframes

时间:2016-08-03 15:19:58      阅读:360      评论:0      收藏:0      [点我收藏+]

标签:

一、介绍

keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面跟着是动画名称加上一对花括号“{…}”,括号中是一些不同时间段样式规则。

语法:@keyframes animationname {keyframes-selector{css-styles;}}

在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词fromto来代表,其中0%对应的是from,100%对应的是to。

在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到

一种在不断变化的效果。

举个栗子:

@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 150px;
  height: 100px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

  

 

css3中的 @Keyframes

标签:

原文地址:http://www.cnblogs.com/afighter/p/5732710.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!