CSS3动画属性之Animation
首先定义一个动画规则:
@keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes mymove /* Opera */ { from {top:0px;} to {top:200px;} }
然后在一个元素中使用该动画规则:
div { width: 50px; height: 50px; top: 100px; background: blue; -webkit-animation-name:'mymove';/*动画属性名,也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环次数,infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/ }
在定义动画规则的地方,from代表开始运行时状态,to代表动画结束时的状态,需要注意的是:from和to只是代表动画开始与结束时的动画 ,在动画结束后from和to里面的css样式对使用
该动画规则的元素不影响 ,也就是说不管你的规则中设置了什么样式,当动画结束后,元素的样式还是会回到执行动画前的样子,就拿上面的例子说吧,一开始我以为动画结束后元素的样式就
变成动画规则里面的to里面的样式了 ,其实不是这样的,找两个例子是一下就知道了
如果这个规则只有from和to是不是显得有点过于鸡肋,其实官方文档中并不推荐使用from和to ,而是用0%代替动画开始100%代替动画结束(百分号不能省略)
除了定义开始和结束,自然少不了一些中间的过渡,所以 你可以在0%到100%中间定义若干个帧,比如下面这样定义规则:
@-webkit-keyframes 'mymove' { 0% { margin-left: 100px; background: green; } 40% { margin-left: 150px; background: orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } }
animation属性不需要触发 ,页面加载完成立即执行,可以使用animation-delay来延迟执行
CSS3动画属性之Animation的更多相关文章
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- Css3动画属性总汇
http://css3lib.alloyteam.com/uilib/animation/demo1/#cta Css3动画属性总汇 Stay hungry. Stay foolish. Attent ...
- CSS3动画属性animation的基本用法
CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点. ani ...
- CSS3动画属性:动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- CSS3动画属性Transform解读
无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...
- 使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: <div id="test"> <img src="/CSS3/img/ ...
- 学习笔记day6:CSS3动画属性
总结: 1: CSS动画:@keyframes animation:ie10+:加-webkit前缀: animation 则是属于关键帧动画的范畴; 它本身被用来替代一些纯粹表现的javascri ...
- 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
随机推荐
- NOIP2010乌龟棋[DP 多维状态]
题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...
- 06章 Struts2数据校验
一.三种实现方式 ① 用validate()方法实现数据校验 继承ActionSupport类,该类实现了Validateable接口,该接口中定义了一个validate()方法,在自定义的Actio ...
- KSFramework常见问题:Lua脚本热重载,内存状态数据丢失?
Lua热重载 内存数据在重载后会丢失 KSFramework中,所有的UI Lua脚本是可以重载的.脚本中的一些内存数据,在重载后会丢失,比如: -- 记录一个UI界面被打开了多少次 function ...
- voxel 与 pixel
中文名称:体素,即顾名思义是体积的像素.用来在三维空间中表示一个显示基本点的单位.类似于二维平面下的pixel(像素). voxel是三维空间中定义一个点的图象信息的单位.在平面中定义一个点要两个坐标 ...
- JAVA代码中加了Try...Catch的执行顺序
public static String getString(){ try { //return "a" + 1/0; return "a"; } catch ...
- 今天在看UWP蓝牙的例子
private async void InitializeRfcommServer() { ListenButton.IsEnabled = false; DisconnectButton.IsEna ...
- HTML 学习笔记 CSS样式(背景)
背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
- Docker容器概念讲解
Docker 是 PaaS 提供商 dotCloud 开源的一个基于 LXC 的高级容器引擎,源代码托管在 Github 上, 基于go语言并遵从Apache2.0协议开源. Docker是通过内核虚 ...
- adb 常用命令
1.adb shell dumpsys SurfaceFlinger 查看window层结构
- mvc route的注册,激活,调用流程
mvc route的注册,激活,调用流程(三) net core mvc route的注册,激活,调用流程 mvc的入口是route,当前请求的url匹配到合适的route之后,mvc根据route所 ...