Animation CSS3_animation css_woyuanliulian的博客-程序员秘密

技术标签: Web前端  Web  

动画(Animation),是CSS3的亮点.//之一

通过animation属性指定@keyframe来完成关键帧动画;

@keyframe用法:  

@keyframes name {
   
  0% { top: 0; }/*0%可用from关键字替代*/
  50% {
    top: 10px; }
  100% {
    top: 0; }/*100%可用to关键字替代*/
}

由于是CSS3,所以不出意外的各种前缀:

--图片来自MDN,CSS中的关键帧

单个帧中可填写多个属性,而且不需要保证一致,如:

@-webkit-keyframes identifier {
   
  from { top: 0; }
  50% {
    top: 10px;background-color:red; }
  to {
    top: 20px;color:red; } 
}/*这是一个完全有效的关键帧定义*/

需要注意的有几点:

  关键帧中有效的属性为可动画属性;如出现不可动画属性,会忽略该属性,不影响其余属性的动画,

  如属性后跟有 !important,则会忽略该属性,

  某个关键帧如果重复定义,则取后定义的帧,  

复制代码
@-webkit-keyframes identifier {
   
 from { top: 0; }
  50% {
   
    top: 10px; /*该属性会动画*/
    background-color:red !important; /*因为有!important字样,所以该条将被忽略*/
    text-align:center; /*由于该属性不为可动画属性,因此也被忽略*/
}
  to {
    top: 20px;color:red; } 
  100% {
   color:green; } /*由于to关键字表示100%,所以该动画只会执行改变颜色为green,而to所对应的属性全部被忽略*/
}
复制代码

帧数范围为0%-100%,不属于这个范围的则被忽略(经实验,关键帧定义可以不按顺序来,可以正确执行,但是可读性不太好);

Animation用法:

animation-name:设置动画的名称,就是@keyframe后跟的标识;

animation-duration:设置动画花费的时间,//这两个为必填属性,第一个不解释了,第二个必填的原因为默认值是0s,0s是不会产生动画效果的,所以为必填;

复制代码
#demo {
   
    animation-name:demo;
    animation-duration:2s;
}
@keyframe demo {
   
    from {top:0;}
    to {
   top:20px;}
}
复制代码

 

animation-timing-function:设置动画的速度曲线,默认值为 ease,可选值有数个,可通过cubic-bezier函数来自定义,这里有一些定义好的,可以直接拿来用的函数,传送阵;

#demo {
   
    animation-function: cubic-bezier(0.25,0.1,0.25,1);/*自定义的贝塞尔曲线*/
}

animation-delay:设置动画开始前的等待时间,默认为0s;

#demo {
   
    animation-delay:2s;/*动画将于2s后执行*/
}

animation-iteration-count:设置动画执行次数,默认为1,使用 infinite 关键字可以使动画无限循环;

#demo {
   
animation-iteration-count:infinite;/*动画将无限循环,此时animation-fill-mode将无效*/
}

animation-direction:设置动画执行完后时候倒序执行,默认为normal,使用 alternate 关键字开启倒序执行

  //仅有animation-iteration-count值为大于1次时才会激活,倒序执行消耗时间为animation-duration设置的时间,奇数次数为正序,偶数次数为倒序;

#demo {
   
animation-direction:alternate;/*激活倒序播放*/
animation-iteration-count:2;/*此时该属性须大于1,direction才会有效*/
}

animation-play-state:设置动画当前状态,默认是 running ,为执行状态,可以设置为 paused 为暂停,

复制代码
#demo {
   
animation-play-state:paused;/*默认不触发动画*/
}
#demo:hover {
   
animation-play-state:running;/*悬浮至该元素才执行动画*/
}
复制代码

animation-fill-mode:设置动画执行完后的状态(复原(none),保持第一帧(backwards)以及保持最后一帧(forwards),还有一个both值 MDN说是同时backwardsforwards,原谅我没有试出它与forwards的区别...,)

  //设置animation-iteration-count值为infinite时将导致该属性失效;

animation的简写方式对顺序要求特别严格,规格如下:

animation:name duration timing-function delay iteration-count direction play-state fill-mode;

使用时需注意:

各种前缀[email protected]里边如果用到了transform,也是需要加前缀的,如:

@-webkit-keyframe demo {
   
    from {-webkit-transform:rotate(7deg);}  
    to {
   -webkit-transform:rotate(14deg);}  
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/woyuanliulian/article/details/80827373

智能推荐

常用搜索引擎框架_搜索框架_lawenliu的博客-程序员秘密

原文链接:http://www.codeceo.com/article/8-java-search-engine.htmlJava 全文搜索引擎框架 Lucene毫无疑问,Lucene是目前最受欢迎的Java全文搜索框架,准确地说,它是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎。Lucene为开发人员提供了相当完整的工具包,可以非常方便地实现强大的全文检索功......

图解Python函数基础学习_python 函数图解_gogogo123456123的博客-程序员秘密

原文链接:https://blog.csdn.net/csdnnews/article/details/101444723函数是 “ 一系列命令的集合”,我们可以通过调用函数来自动执行某一系列命令。虽然经常性地出现于文章中的print()是被录入在Python的标准库中的函数,但是,程序员亦可创建自己的函数。如果想要定义函数,则需要以“def 函数名():”的格式为开头编写代码。在这之下的一个...

关于cache和write buffer_往事已遥远的博客-程序员秘密

http://blog.chinaunix.net/uid-20662820-id-3917558.html1. 关于cache和write buffercache和write buffer都是内置于CPU内部的一小段高速存储器,cache中保存着最近一段时间被CPU使用过的内存数据,而write buffer则是用来应对内存的写操作的,将原本要写向内存的数据暂写到wri...

Java代码性能分析工具_iteye_1287的博客-程序员秘密

1、Java程序性能分析1>Jconsole:JDK自带2>VisualVM:加强性能分析工具参考资料:http://jiajun.iteye.com/blog/8101502、Android程序性能分析1>traceView:Android自带参考资料:http://blog.csdn.net/iris0123456/a...

教你3招解决PDF文字无法复制的所有问题_cocowei0306的博客-程序员秘密

有些时候需要用到PDF文档中的部分文字内容,可能会遇到文字无法直接复制的问题,那么是什么原因导致文字无法复制呢?要怎么处理才能正常复制呢?下面一起来看看具体的原因和解决方案吧。一、文字可以选中但复制失败如下图所示选中文字后选择复制却提示复制文本失败,只能复制为图片,这种情况一般是因为文档被加密,限制被复制,解决方法也比较简单,只需要将PDF文档解密就可以了。首先搜索speedpdf并打开这款在线免费转换工具后,选择首页中的Unlock PDF(解密PDF)即可;根据提示上传PDF文档后,点击下方

ROS中无法定位软件包问题_ros无法定位软件包_在路上_continue的博客-程序员秘密

一、ROS版本不对ROS 和ubuntu版本对应关系二、ROS软件源有问题类似于以下问题多半是ROS软件源不对更换ROS软件源在目录/etc/apt/sources.list.d中软件源更换为中科大的软件源deb https://mirrors.ustc.edu.cn/ros/ubuntu/ bionic main或者在终端中使用echo命令sudo sh -c ‘echo “deb https://mirrors.ustc.edu.cn/ros/ub.

随便推点

MySQL 时间入库问题:Incorrect datetime value: '' for column 'createTime' at row 1_Cadence_D的博客-程序员秘密

问题: 写入MySQL时  出现  Incorrect datetime value: '' for column 'createTime' at row 1 user.setCreateTime(new Date()); user.setExpireTime(new Date());解决 ://转换时间格式SimpleDateFormat simpleDate...

Linux--基本命令详解来了_henniu178_小爱人的博客-程序员秘密

文章目录Linux命令概述Linux命令的分类内部命令与外部命令的区别Linux命令行的格式cd命令路径分类ls命令 选项 路径alias 命令du命令touch命令echo创建 显示文件in命令cp命令rm命令mv指令 (move,移动,剪切)cat指令which命令Linux命令概述Linux命令是对Linux系统进行管理的命令。对于Linux系统来说,无论是中央处理器、内存、磁盘驱动器、键盘、鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心。Linux命令在系统中有两种.

JQuery_$(document).ready() 与 $(window).load()方法比较_高达一号的博客-程序员秘密

$(document).ready() JQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。  执行时间:$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 也就是不会等到图片,Flash全部加载完成后执行。  $

Nexus Repository Manager 3 私服搭建 —— windows版_cuncaojin的博客-程序员秘密

nexus3本文安装的是免费版:Nexus Repository OSS下载最新版本下载链接1 最新版本下载链接2 或到 https://my.sonatype.com/ 可以下载nexus2和3两大版本参考页面: 安装我下载的包为:“nexus-3.13.0-01-win64.zip”,我的路径:”D:\nexus\nexus-3.13.0-01-win...

java doc字数_JAVA 仿 MS word 字数统计_研之成理的博客-程序员秘密

// TODO caihao 2016-11-06 字数统计 工具类/*** 统计字数,参照MS office word 2007规则* @param context 文本内容* @return 字数*/public int getMSWordsCount(String context){int words_count = 0;//中文单词String cn_words = context.rep...

DialogFragment或者Dialog在某些机型上宽高设置无效或者不适配问题的解决_dialogfragment 设置高度无效_woshiliuzemin的博客-程序员秘密

Dialog可以说是一个项目中的必用控件了,但是既然Google推荐用DialogFragment来替代Dialog,那我们就改用DialogFragment吧,话不多说,写一个最简单常见的屏幕中间弹出的DialogFragment,下面是java代码:public class CenterTipDialogFragment extends DialogFragment { @Bind...

推荐文章

热门文章

相关标签