css3 animation 动画属性简介
animation 动画属性介绍
animation 属性是一个简写属性,用于设置动画属性:
1. animation-name----规定需要绑定到选择器的 keyframe 名称。
语法:animation-name: keyframename|none;
Keyframename:规定需要绑定到选择器的 keyframe 的名称。
None: 规定无动画效果(可用于覆盖来自级联的动画)。
例如:
{
-webkit-animation-name: my_animation;
-moz-animation-name:my_animation;
-ms-animation-name:my_animation;
-o-animation-name: my_animation;
animation-name: my_animation;
}
@-webkit-keyframes my_animation{}
@-moz-keyframes my_animation{}
@-ms-keyframes my_animation{}
@-o-keyframes my_animation{}
@keyframes my_animation{}
2. animation-duration----规定完成动画所花费的时间,以秒或毫秒计。
语法:animation-duration: time;
time : 规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。
例如:
{
-webkit-animation-duration: 2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration: 2s;
animation--duration: 2s;
}
3. animation-timing-function----规定动画的速度曲线
语法:animation-timing-function: value;
Value值:
linear:动画从头到尾的速度是相同的。
ease:默认。动画以低速开始,然后加快,在结束前变慢。
ease-in:动画以低速开始。
ease-out :动画以低速结束。
ease-in-out:动画以低速开始和结束。
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
例如:
{animation-timing-function:linear;}
{animation-timing-function:ease;}
{animation-timing-function:ease-in;}
{animation-timing-function:ease-out;}
{animation-timing-function:ease-in-out;}
4. animation-delay----规定在动画开始之前的延迟
语法:animation-delay: time;
Time值:可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。
{
animation-delay:2s;
-webkit-animation-delay:2s;
}
5. animation-iteration-count----规定动画应该播放的次数
语法:animation-iteration-count: n|infinite;
n:定义动画播放次数的数值。
infinite:规定动画应该无限次播放。默认值为:1。
示例:
{
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
6. animation-direction----规定是否应该轮流反向播放动画
语法:animation-direction: normal|alternate;
normal:默认值。动画应该正常播放。
alternate :动画应该轮流反向播放。
注释:如果把动画设置为只播放一次,则该属性没有效果。
示例:
{
animation-direction:alternate;
-webkit-animation-direction:alternate;
}
7. animation-play-state 属性规定动画正在运行还是暂停
语法:animation-play-state: paused|running;
paused:规定动画已暂停。
running:规定动画正在播放。
注释:可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。
示例:
{
animation-play-state:running;
-webkit-animation-play-state:running;
}
8. animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见
语法:animation-fill-mode : none | forwards | backwards | both;
none:不改变默认行为。
forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both :向前和向后填充模式都被应用。
css3 animation 动画属性简介的更多相关文章
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- Android Activity动画属性简介
Android Activity动画属性简介 在Android当中 设置activity的动画 需要复写 android:windowAnimationStyle这个属性 我们自定义一个动画样式来继承 ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
- css3 animation(动画)笔记
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
随机推荐
- cf B. Inna and Nine
http://codeforces.com/contest/374/problem/B #include <cstdio> #include <cstring> #includ ...
- API Hook完全手册
文章来源: http://blog.csdn.net/atfield 原文作者: ATField 整理日期: 2008-07-16 发表评论 字体大小: 小 中 大 注:本文是根据我两年前写的一个 ...
- Delphi7 THTTPRIO 控件设置超时
HTTPRIOLeExp.HTTPWebNode.SendTimeout := 100000; //发射 HTTPRIOLeExp.HTTPWebNode.ConnectTimeout := 10 ...
- python3、selenium、autoit3,通过flash控件上传文件
autoit.au3 #include <Constants.au3> WinWait(); //暂停执行脚本,直到上传对话框出现 WinActive("打开") Wi ...
- mysql 安装截图
这里有3个选项, 1.Developer Machine(开发机器),个人用桌面工作站,占用最少的系统资源 2.Server Machine(服务器),MySQL服务器可以同其它应用程序一起运行,例如 ...
- HDOJ(HDU) 1862 EXCEL排序(类对象的快排)
Problem Description Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能. Input 测试输入包含若干测试用例.每个测试用例的第1行包含两个整数 N (<= ...
- 【1】JAVA---地址App小软件(AddressApp.class)(初步接触项目开发的分层思想)(表现层)
这个是表现层的main方法. 实现的地址信息有: 姓名,性别,年龄,电话,地址. 实现的功能有: 增加地址: 删除地址: 修改地址: 查找地址:其中年龄的查找为年龄段的查找. 数据存储的方式为文件存储 ...
- 解读sample4
说明 被测试代码文件 sample4.h.sample4.cc 测试代码文件 sample4_unittest.cc 官网上如是描述sample4: Sample #4 is another basi ...
- LoadRunner基础入门教程
原文地址:http://jingyan.baidu.com/article/215817f7dedfb01eda1423df.html 从LoadRunner英语字面上进行理解就是负载跑步者,为什么这 ...
- 开源项目AndroidUtil-采用Fragment实现TabHost
原文出自:方杰|http://fangjie.info/?p=141 转载请注明出处 学习Android也有一段时间了,感觉大部分的Android应用都有很多类似的组件,所以就打算做了这样一个开源项目 ...