css Animation初体验(译文)

目前有越来越多的网站都使用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;

原文来自:http://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068

时间: 2024-11-11 13:53:03

css Animation初体验(译文)的相关文章

CSS之初体验

在接触CSS这一周时间中,不断更新知识,在这当中感觉唯一的一点就是,英语单词太多了.对与我们这些英语渣渣,还是要多努力点,在其中发现部少问题. 一.手写css代码的过程中,常常做无用功.有的时候到经典论坛去看到cssplay去看,发现自己的代码写得非常的繁复.没有高手写得简单有条理经 常是,我想到什么随手就写上,而且从来没有考虑过属性的顺序问题.比如说margin写好了之后,突然想起来,然后下面再写上一行margin-top这 无疑是对资源的极大浪费.更深入的就是还要考虑margin是写到a里,

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

本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Router初体验4.AngularJS路由系列(4)-- UI-Router的$state服务.路由事件.获取路由参数5.AngularJS路由系列(5)-- UI-Router的路由

leaflet开源地图库源码阅读笔记(一)——简介&amp;Demo初体验(by vczero)

一.简介 电子地图已经在O2O.生活服务.出行等领域布局,传统的GIS也孕育着互联网基因.传统GIS的图商有ESRI(Arc系列).四维.高德.超图.中地等等.在web互联网领域,百度和高德较为出色.但是开放源代码都远远做的不够,相比而言国外开源较多且丰富,最近认真研读了openlayers2/3和leaflet的源码,收获颇多,不仅加强对浏览器兼容性.HTML5.CSS3等基础,还增强了GIS的基础.本人现在也在一家互联网公司做js api的研发,因此,需要不断地吸取开源代码的营养. leaf

我是如何初体验uglifyjs压缩JS的

一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感,哦?激起了我的好奇心.百之谷之,哟,相关的介绍还不少.然后折腾了个把小时,基本上知道了是个怎么回事. 我觉得吧,还是有些用的,即使是不是从事node开发的人,抽个小空,share之,于是就有了本文.人总有浮躁的时候,我也不例

TypeScript初体验

why? 为啥使用typescript,它的好处是什么,什么时候需要用到它? 好了,typescript的介绍网上一搜就是一大堆,各种解释,肯定比我说的详细,各位可以自行Google.那就谈谈我的个人见解吧! 1.出于对一门新语言的好奇,"黑科技"什么的总用存在的意义(就像bridge.net就是c#版的javascript),更何况并不能算是"黑科技",并且是c#之父编写的. 2.对于深受c#"毒害"的程序员,对javascript等弱类型语言

[开发笔记]-Jqplot图表初体验

文章内容为初次使用Jqplot图表插件的测试代码,仅供参考. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="js/jqpl

ionicframework I ------------- 初体验

ionicframework I -------------  初体验 Create hybrid mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JScomponents for building highly interactive apps. Built with Sass and op

Node.js 网页瘸腿爬虫初体验

延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // 内置文件处理模块 var fs=require('fs'); // 创建一个将流数据写入文件的WriteStream对象 var outstream=fs.createWriteStream('./1.txt'); /

ASP.NET MVC学习---(五)MVC初体验

经过之前n多的铺垫 我们已经大概了解了这个姓m名vc的家伙了 那么今天我们就来体验一把 怎么体验呢? 就来做一个小例子吧~ mvc增删改查的例子 数据库还是之前我们的老朋友 关系图: 表中的数据已填好 T_Users 将就着用着吧,哈哈 现在要求对T_Users表进行增删改查 开搞~ 回到之前新建的mvc项目 在Controllers文件夹下新建一个名为Home的空控制器 当浏览器请求Home下面的Index方法的时候返回什么? 当然是主页面啦 这里我们的主页面就是显示T_Users数据列表 代