animation几个比较好玩的属性(alternate,及animation-fill-mode)
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
animation-fill-mode: both;
} @keyframes mymove
{
from {top:0px;}
to {top:200px;}
} @-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
} @-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
} @-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> <div></div> </body>
</html> 这是摘自w3school的一段关于keyframes的代码，大家有兴趣的可以看一下，
http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes
大家可以看到一个红色正方形，从上方运动到下面，再快速回到上面，再按animation:5s;从上面运动到下方，这样周而复始.那么在这个里面起关键的是keyframes，定义了动画，而animation:infinite 5s；则定义了动画效果，其中infinite代表的是循环，周而复始的这个过程。去掉这个，我们则看到红色正方形缓缓下来之后再快速回到上面后就不再动了。
那么我们想使正方形运动一次后留在下面，应该如何处理，这就是animation-fill-mode的作用，我今天在teambition网站上看到了他们的导航条的效果便是利用了这个，根据w3，animation-fill-mode有四个属性，none,forwards,backwards,both，其中none和forwards使得运动物体动画结束后回到动画前的状态，而both和forwards则使运动物体在动画结束后保留动画结束前最后一帧的效果，因此如 果我们希望正方形运动一次后停在下方，则需要使用animation-fill-mode这个属性。
而alternate则是达到往返效果，我们在实现摆钟动画时往往可能需要这个，我们不可能希望摆钟从左摆到右是一个我们确定的频率，从右摆到左又是一个急速的状态，没有保持一致。这样视觉上会大打折扣，大家可以在这个红色正方形上实验一下。譬如animation:mymove 5s infinite;变为 animation:mymove 5s infinite alternate；
来实际观察一下效果。
如有问题请及时告诉我。大家共同学习啦。
animation几个比较好玩的属性(alternate,及animation-fill-mode)的更多相关文章
- animation几个比較好玩的属性(alternate,及animation-fill-mode)
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- Android动画主要包含补间动画（Tween）View Animation、帧动画（Frame）Drawable Animation、以及属性动画Property Animation
程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- CSS3动画属性：动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- 使用属性动画 — Property Animation
属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...
- css3 transition属性变化与animation动画的相似性以及不同点
下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...
- 使用属性动画 — Property Animation
属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...
- Android 动画——属性动画Property Animation
Android在3.0之前只提供了两种动画:View Animation .Drawable Animation .也就是我们在<Android 动画——Frame Animation与Twee ...
随机推荐
- MySQL注入时常用函数
注入常用函数 数据库相关 database() --- 返回当前数据库名 @@datadir --- 读取数据库路径 @@basedir --- 读取数据库安全路径 @@version_compile ...
- Java并发编程基础三板斧之Semaphore
引言 最近可以进行个税申报了,还没有申报的同学可以赶紧去试试哦.不过我反正是从上午到下午一直都没有成功的进行申报,一进行申报 就返回"当前访问人数过多,请稍后再试".为什么有些人就 ...
- PAT-1066（Root of AVL Tree）Java语言实现
Root of AVL Tree PAT-1066 这是关于AVL即二叉平衡查找树的基本操作,包括旋转和插入 这里的数据结构主要在原来的基础上加上节点的高度信息. import java.util.* ...
- 鸿蒙的js开发模式19：鸿蒙手机下载python服务器端文件的实现
目录:1.承接上篇鸿蒙客户端上传文件2.域名通过内网穿透工具3.python服务器端代码4.鸿蒙手机的界面和业务逻辑5.<鸿蒙的js开发模式>系列文章合集 1.承接上篇鸿蒙客户端上传文件, ...
- 番外----python入门----pip相关
pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 但是,由于pip使用的pip仓库默认为:http://pypi.python.org/ 是国外的 ...
- 任务队列 与 Celery概述
一.任务队列(Task Queues) 1.1 什么是任务队列? 任务队列用于管理后台工作,通常这些后台工作必须在 HTTP请求-响应循环 之外执行. 1.2 为什么需要任务队列? 对于那些不是由客户 ...
- Java 树结构实际应用 二（哈夫曼树和哈夫曼编码）
赫夫曼树 1 基本介绍 1) 给定 n 个权值作为 n 个叶子结点,构造一棵二叉树,若该树的带权路径长度(wpl)达到最小,称这样的二叉树为 最优二叉树,也称为哈夫曼树(Huffman Tree), ...
- JAVA-常用集合类型转换例子
package com.net.xinfang.reflect; import java.util.ArrayList; import java.util.Arrays; import java.ut ...
- python之Click的简单应用
一.介绍 Click是一个Python包,用于以可组合的方式创建漂亮的命令行界面,只需要很少的代码.这是"命令行界面创建工具包".它具有高度可配置性,但具有开箱即用的合理默认值. ...
- 【Azure 应用服务】App Service站点Header头中的中文信息显示乱码？当下载文件时，文件名也是乱码？
问题描述 在本地开发的站点,响应头中的中文可以正常显示,部署到Azure App Service站点后,响应中文乱码.通过多方面验证,在代码中设置Response的Headers会显示乱码,而直接配置 ...