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 ...
随机推荐
- Ubuntu的点滴-Vim、VM Tools、Samba、换源
<div id="article_content" class="article_content clearfix"> <link rel=& ...
- 2020 年安装 FreeBSD 系统的基础视频
B 站搜索 BV14i4y137mh 包含了下载,虚拟机安装,配置 SSH 等教程. https://www.bilibili.com/video/BV14i4y137mh
- 输入一个字符串,按字典序打印出该字符串中字符的所有排列。例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba。
题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述: 输 ...
- 2019 GDUT Rating Contest III : Problem E. Family Tree
题面: E. Family Tree Input file: standard input Output file: standard output Time limit: 1 second Memory ...
- CSS水平布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- SparkSQL中产生笛卡尔积的几种典型场景以及处理策略
[前言:如果你经常使用Spark SQL进行数据的处理分析,那么对笛卡尔积的危害性一定不陌生,比如大量占用集群资源导致其他任务无法正常执行,甚至导致节点宕机.那么都有哪些情况会产生笛卡尔积,以及如何事 ...
- Nacos 2.0 正式发布，性能提升 10 倍！！
3月20号,Nacos 2.0.0 正式发布了! Nacos 简介: 一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台. 通俗点讲,Nacos 就是一把微服务双刃剑:注册中心 + 配置中 ...
- TreeMap和HashMap的元素比较
写在前面的话 2021.04,准备面试和CCF CSP认证的我准备做一套CCF模拟题,然后就有了此篇博客(x 题目:201912-2 回收站报数 题目截图: 第一个想法:读取每个垃圾的位置,存入Tre ...
- [Azure Devops] 获取单元测试的代码覆盖率
1. 获取代码覆盖率 上一篇文章里,我们在 Pipeline 中插入一个单元测试并把所有单元测试都通过作为 Pipeline 通过的硬性要求.除此以外,我们还可以获取单元测试的代码覆盖率,用作衡量代码 ...
- Node.js 包管理器 NPM 讲解
包管理器又称软件包管理系统,它是在电脑中自动安装.配制.卸载和升级软件包的工具组合,在各种系统软件和应用软件的安装管理中均有广泛应用.对于我们业务开发也很受益,相同的东西不必重复去造轮子. 每个工具或 ...