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
;
}
}
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:
4
s;
animation-delay:
1
s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-
direction
: alternate;
}
.element {
animation: tutsFade
4
s
1
s infinite linear alternate;
}
增加浏览器前缀:
在工作中,我们需要使用浏览器指定前缀确保最好的浏览器支持。标准前缀应用:
- Chrome & Safari:
-webkit-
- Firefox:
-moz-
- Opera:
-o-
- Internet Explorer:
-ms-
动画属性使用了浏览器前缀的形式:
.element {
-webkit-animation: tutsFade
4
s
1
s infinite linear alternate;
-moz-animation: tutsFade
4
s
1
s infinite linear alternate;
-ms-animation: tutsFade
4
s
1
s infinite linear alternate;
-o-animation: tutsFade
4
s
1
s infinite linear alternate;
animation: tutsFade
4
s
1
s infinite linear alternate;
}
@-webkit-keyframes tutsFade {
/* your style */
}
@-moz-keyframes tutsFade {
/* your style */
}
@-ms-keyframes tutsFade {
/* your style */
}
@-o-keyframes tutsFade {
/* your style */
}
@keyframes tutsFade {
/* your style */
}
多动画
使用逗号分割添加多动画。为tutsFade
元素添加回转,我们要声明一个额外的@keyframes然后绑定到元素上:
.element {
animation: tutsFade
4
s
1
s infinite linear alternate,
tutsRotate
4
s
1
s infinite linear alternate;
}
@keyframes tutsFade {
to {
opacity:
0
;
}
}
@keyframes tutsRotate {
to {
transform: rotate(
180
deg);
}
}
矩形变圆形实例
这个例子中总共有五个步骤,每个步骤将为元素定义一个圆角,一个回转和不同的背景色,下面是实现的步骤和代码。
基本元素
首先创建一个标记,动画的元素。甚至不用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;
}
}
@keyframes square-to-
circle
{
0%
{
border-radius:
0
0
0
0
;
background
:coral;
transform:rotate(
0
deg);
}
25%
{
border-radius:
50%
0
0
0
;
background
:darksalmon;
transform:rotate(
45
deg);
}
50%
{
border-radius:
50%
50%
0
0
;
background
:indianred;
transform:rotate(
90
deg);
}
75%
{
border-radius:
50%
50%
50%
0
;
background
:lightcoral;
transform:rotate(
135
deg);
}
100%
{
border-radius:
50%
;
background
:darksalmon;
transform:rotate(
180
deg);
}
}
应用动画
定义了square-to-circle动画后,需要将它应用到div上:
div {
width
:
200px
;
height
:
200px
;
background-color
: coral;
animation: square-to-
circle
2
s
1
s 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
2
s
1
s 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
2
s .
5
s infinite cubic-bezier(
1
,.
015
,.
295
,
1.225
) alternate;
}
@keyframes square-to-
circle
{
0%
{
border-radius:
0
0
0
0
;
background
:coral;
transform:rotate(
0
deg);
}
25%
{
border-radius:
50%
0
0
0
;
background
:darksalmon;
transform:rotate(
45
deg);
}
50%
{
border-radius:
50%
50%
0
0
;
background
:indianred;
transform:rotate(
90
deg);
}
75%
{
border-radius:
50%
50%
50%
0
;
background
:lightcoral;
transform:rotate(
135
deg);
}
100%
{
border-radius:
50%
;
background
:darksalmon;
transform:rotate(
180
deg);
}
}
最后的事情
在现代浏览器中一切运行正常,但是在Firefox中渲染对象有点不足,边缘会出现锯齿:
幸运的是,有一个解决方法。在div上添加透明的outline之后Firefox就会完美地渲染!
outline
:
1px
solid
transparent
;
css Animation初体验的更多相关文章
- 范仁义web前端介绍课程---4、html、css、js初体验
范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...
- python--爬虫入门(七)urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- Knockout.js初体验
前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...
- YII学习,初体验 ,对YII的一些理解.
先说点没用的: 不会选择,选择后不坚持,不断的选择.这是人生中的一个死循环,前两一直迷茫.觉得自己前进方向很不明朗.想去学的东西有很多.想学好YII,想学PYTHON 想学学hadoop什么的,又想研 ...
- gulp快速入门&初体验
前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...
- [转]Python爬虫框架--pyspider初体验
标签: python爬虫pyspider 2015-09-05 10:57 9752人阅读 评论(0) 收藏 举报 分类: Python(8) 版权声明:本文为博主原创文章,未经博主允许不得转载. ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- ionicframework I ------------- 初体验
ionicframework I ------------- 初体验 Create hybrid mobile apps with the web technologies you love. Fr ...
- SASS初体验
SASS初体验 标签(空格分隔): sass scss css 1. 编译环境 需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行 gem install ...
随机推荐
- JFinal学习
1 jfinal-1.9-bin.jar 2 继承Controller编写控制器 public void sendJPushToXXX() { String userId = getPara(&quo ...
- UIDatePicker日期选取器
//定义显示日期的格式 NSDateFormatter *dateFormat = [[NSDateFormatter alloc]init]; //NSDateFormatterMediumStyl ...
- 用 WEKA 进行数据挖掘,第 1 部分: 简介和回归(转)
http://www.ibm.com/developerworks/cn/opensource/os-weka1/index.html 简介 什么是 数据挖掘?您会不时地问自己这个问题,因为这个主题越 ...
- UEFI Bootable USB Flash Drive - Create in Windows(WIN7 WIN8)
How to Create a Bootable UEFI USB Flash Drive for Installing Windows 7, Windows 8, or Windows 8.1 In ...
- phpcms V9 常用函数 及 代码整理
常用函数 及 常用代码 总结如下 <?php //转换字符串或者数组的编码 str_charset($in_charset, $out_charset, $str_or_arr) //获取菜单 ...
- wex5 实战 登陆帐号更换与用户id一致性
一 前言 关于用户登陆,注册,页面跳转,我讲了很多,都是页面框架级别的.有人问到这个问题,索性总结一下,今天是收尾最后一篇. 以往初学时的设计是: 1 注册 2 登陆 3 进入页面. 这种很简单,没有 ...
- MessageReceiver
class MessageReceiver { private RelayEngine<MessageCollection> _MessageRelayEngine; private st ...
- hdu 5901 Count primes
题意: 计数区间$[1, n](1 \leq n \leq 10^{11})$素数个数. 分析: 这里只介绍一种动态规划的做法. 首先要说一下[分层思想]在动态规划中非常重要,下面的做法也正是基于这一 ...
- CSS2中基本属性的介绍
这是继上一篇的选择器的总结,对css2基本属性的小结!
- 瘋耔java语言笔记
一◐ java概述 1.1 ...