目前有越来越多的网站都使用animation，无论他们是用GIF，SVG，WebGL，视频背景或者其他形式展示。适当地使用动画会让网站更生动，互动性更好，为用户增加一个额外的反馈和体验层。

在本教程中我会向你介绍CSS动画；随着浏览器支持性的提高已经变得越来越流行了，css动画在做一些事情上有很高的性能。在涵盖了基础知识后，我们将建一个快速的例子：矩形变成圆形的动画。

演示看这里

@keyframes和动画 介绍

css动画的主要组件：@keyframes，创建动画的css规则。把@keyframes想象为动画步骤的时间轴。在@keyframes里，你可以定义这些步骤，每个都有不同的样式声明。

第二步，让css动画能运行，需要为@keyframes绑定一个选择符。基于这些步骤，@keyframes声明的所有代码都会变解析然后对新的样式进行初始化。

The @keyframes

这里我们将会设置动画的步骤，@keyframes的属性如下：

  • 选择符的名字（这个例子中是tutsFade） .
  • 步骤：0%-100%;  from (equal to 0%) and to (equal to 100%).
  • CSS 样式: 每个阶段要应用到的样式.

例子：

@keyframes tutsFade {

  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
或者：
@keyframes tutsFade {

  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
简写：
@keyframes tutsFade {

  to {
    opacity: 0;
  }
}
 
上面的代码为元素应用一个不透明度的过渡，从opacity: 1到opacity: 0.上面三种方法实现的效果是一样的。
 

The Animation

animation的属性：

  • animation-name: @keyframes名称 (此例为 tutsFade).
  • animation-duration:时间间隔，动画从开始到结束的总长.
  • animation-timing-function: 设置动画速度 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay:动画开始前的延迟.
  • animation-iteration-count: 在动画期间它会遍历多少次.
  • animation-direction: 改变循环的方向，从开始到结束，还是从结束到开始，或者两者都.
  • animation-fill-mode: 指定动画结束时元素应用的样式 ( none | forwards | backwards | both ).

例如：

.element {

  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}
简写为：
.element {

  animation: tutsFade 4s 1s infinite linear alternate;
}
上面的代码会创建一个闪烁效果，1秒的动画延迟，4秒的动画间隔，交替的方向和无限线性循环迭代.

增加浏览器前缀：

在工作中，我们需要使用浏览器指定前缀确保最好的浏览器支持。标准前缀应用：

  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-

动画属性使用了浏览器前缀的形式：

.element {

    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}
@keyframes的前缀使用：
@-webkit-keyframes tutsFade { /* your style */ }

@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }
 
更多浏览器前缀：http://css3please.com/
 

多动画

使用逗号分割添加多动画。为tutsFade 元素添加回转，我们要声明一个额外的@keyframes然后绑定到元素上：

.element {

  animation: tutsFade 4s 1s infinite linear alternate,tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
  to {
    opacity: 0;
  }
}
@keyframes tutsRotate {
  to {
    transform: rotate(180deg);
  }
}
 
------------------------------------分割线--------------------------------------------------------------------

矩形变圆形实例

这个例子中总共有五个步骤，每个步骤将为元素定义一个圆角，一个回转和不同的背景色，下面是实现的步骤和代码。

基本元素

首先创建一个标记，动画的元素。甚至不用class，仅仅只用一个div:

<div></div>

然后运用元素选择为div添加样式：

div {

  width: 200px;
  height: 200px;
  background-color: coral;
}

声明Keyframes

定义一个 @keyframes,命名为square-to-circle，五个步骤如下：

@keyframes square-to-circle {

  0%{}
  25%{}
  50%{}
  75%{}
  100%{}
}
需要为每个步骤定义一些样式，开始为每个矩形角定义圆角：
@-webkit-keyframes square-to-circle {

  0%  {
    border-radius:0 0 0 0;
  }
  25%  {
    border-radius:50% 0 0 0;
  }
  50%  {
    border-radius:50% 50% 0 0;
  }
  75%  {
    border-radius:50% 50% 50% 0;
  }
  100% {
    border-radius:50%;
  }
}
然后为每个步骤定义不同的背景色：
@keyframes square-to-circle {

  0%  {
    border-radius:0 0 0 0;
    background:coral;
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
  }
  100% { 
    border-radius:50%;
    background:darksalmon;
  }
}
旋转DIV添加一点视觉效果：
@keyframes square-to-circle {

  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% { 
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

应用动画

定义了square-to-circle动画后，需要将它应用到div上：

div {

  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite alternate; 
}
上面使用了简写的动画属性，它们的状态是：
  • 动画名：square-to-circle.
  • 动画间隔：2s.
  • 动画延迟：1s.
  • 动画循环次数是无限的.
  • 动画运行方向是交替的, 首先从开始到结束，然后返回到最开始，然后到结束，循环往复。

使用Timing-Function

可以为animation添加的最后一个属性是animation-timing-function.定义移动的速度，加速或者减速。这个函数可以是一个非常详细的值，尴尬的手动计算，但是有很多免费的网站为timing-function提供资源和在线定制。

例如：CSS Easing Animation Tool，现在来计算我们的定时功能。

运用立方贝塞尔函数为square-to-circle动画添加伸缩效果。

div {

  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; 
}
最终的没有使用浏览器前缀( -webkit- , -moz-, -ms-, -o- ) 的代码如下：
div {

  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
 
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% { 
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}
 

最后的事情

在现代浏览器中一切运行正常，但是在Firefox中渲染对象有点不足，边缘会出现锯齿：

幸运的是，有一个解决方法。在div上添加透明的outline之后Firefox就会完美地渲染！

outline: 1px solid transparent;

 
 
 

css Animation初体验的更多相关文章

  1. 范仁义web前端介绍课程---4、html、css、js初体验

    范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...

  2. python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨

    python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...

  3. Knockout.js初体验

    前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...

  4. YII学习,初体验 ,对YII的一些理解.

    先说点没用的: 不会选择,选择后不坚持,不断的选择.这是人生中的一个死循环,前两一直迷茫.觉得自己前进方向很不明朗.想去学的东西有很多.想学好YII,想学PYTHON 想学学hadoop什么的,又想研 ...

  5. gulp快速入门&初体验

    前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...

  6. [转]Python爬虫框架--pyspider初体验

    标签: python爬虫pyspider 2015-09-05 10:57 9752人阅读 评论(0) 收藏 举报  分类: Python(8)  版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  7. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  8. ionicframework I ------------- 初体验

    ionicframework I -------------  初体验 Create hybrid mobile apps with the web technologies you love. Fr ...

  9. SASS初体验

    SASS初体验 标签(空格分隔): sass scss css 1. 编译环境 需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行 gem install ...

随机推荐

  1. Configure LDAP Server(centos7 openldap)

    1.安装openldap -server: [root@dlp ~]# yum -y install openldap-servers openldap-clients [root@dlp ~]# c ...

  2. Leetcode: Sentence Screen Fitting

    Given a rows x cols screen and a sentence represented by a list of words, find how many times the gi ...

  3. HDU 5063 Operation the Sequence（仔细审题）

    http://acm.hdu.edu.cn/showproblem.php?pid=5063 题目大意: 题目意思还是比较简单.所以就不多少了.注意这句话,对解题有帮助. Type4: Q i que ...

  4. centos7 开启防火墙端口 firewalld

    systemctl start firewalld firewall-cmd --zone=public --add-port=3306/tcp --permanent firewall-cmd -- ...

  5. struts---JSP界面验证码生成与验证

    之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...

  6. ERROR 1130: Host 'XXXXXXX' is not allowed to connect to this MySQL server

    解决方法:1. 改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 & ...

  7. mbed学习之 PWMOUT

    PWM通过一个周期内不同占空比来表征模拟量,应用非常广泛.mbed中提供了一个PWM类,来对PWM进行操作,可以分别设置占空比,周期,以及脉冲宽度. 因为这里是使用单片机内部TIM来生成PWM波的,所 ...

  8. DataList删除操作

    <asp:DataList ID="fileList" runat="server" RepeatColumns="1" Repeat ...

  9. python直接执行另一个文件中的代码

    看你弄的这么辛苦,给你的方法exec(open(".py","r").read)open(".py",'r').read() 就是读取文件的 ...

  10. 技巧分享：解决Word 2010当中“分页符”造成的空白行

    技巧分享:解决Word 2010当中“分页符”造成的空白行 P1:关于“分页符” 在Word当中插入“分页符”之后,后面的内容就会“更起一段”.就好像“换行符”(回车)会让后面的内容“另起一行”一样. ...