CSS中的动画
1.transition
在CSS3中，可以通过transition为元素从一种样式变换为另外一种样式的过程添加效果。
transition为简写属性，用于在一个属性中设置四个过渡属性，分别是：
transition-property：应用过渡的CSS属性的名称，如width，background-color等；
transition-duration：过渡过程所花的时间，如不指定，默认为0；
transition-timing-function：过渡效果的时间曲线，即动画速度随时间的变化而变化，默认为ease（先慢再变快再以慢速结束）；
transition-delay：规定过渡效果延迟多少开始，默认为0；
eg：
<style>
div{
width:50px;
heigth:50px;
background-color:yellow;
transition:width 2s;
}
div:hover{
width:100px;
}
</style> <div></div>
上面的例子中，当鼠标移到该元素上面时，元素的宽度width会在2s内从50px增加为100px；
另外transition-property的值也可以设定为transform，这样一来就可以实现更多的动画效果
eg：
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:transform 2s;
} div:hover
{
transform:translate(30px,40px);
}
</style> <div></div>
上面的例子中 ，当鼠标移到该元素上面时，元素两秒内向左向下移动30px、40px；
如果需要向多个样式添加过渡效果，应该使用逗号隔开
eg：
div{
transition:width 2s,transform 3s,height 4s;
}
2.animation
animation 包含六个属性，分别是：
animation-name：规定@keyframes动画的名称；
animation-duration：规定完成一个动画周期所花的时间；
animation-timing-function：规定动画速度的变化曲线，默认为ease；
animation-delay：规定动画延迟开始的时间，默认为0；
animation-iteration-count：规定动画被播放的次数（周期），默认为1，infinite为无限次播放；
animation-direction：规定动画是否在下一周期逆序播放，默认为normal，动画正常播放，设置为alternate时，动画在1，3，5等奇数次时正常播放，在2，4，6等偶数次逆序播放；
除此6个属性外，还有两个不包含在animation简写属性内的。
animation-play-state：规定动画是运行还是暂停的，running表示运行中，paused表示暂停中，一般在JavaScript中使用，如此便可以在播放过程中暂停动画。
animation-fill-mode：规定动画在播放前或播放后，动画效果是否可见。属性值默认为none；设置为forwards时，当动画完成时，保持最后的效果（即保持在最后的关键帧中设置的效果），设置为backwards时，在animation-delay设置的那段时间内，在动画正式开始时，应用在最开始的关键帧中定义的效果
和animation密切相关的，还有上面提到的@keyframes，@keyframes用于创建动画，通过在@keyframes中定义CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
eg：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
#test {
width: 100px;
height: 100px;
background-color: blue;
animation: myAnimation 3s;
}
@keyframes myAnimation {
from {
width: 100px;
}
to {
width: 300px;
}
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
另外，animation不同于transition的地方在于，animation可以定义关键帧，可以使动画在多个状态间变换
eg：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
#test {
width: 100px;
height: 100px;
background-color: blue;
animation: myAnimation 3s;
}
@keyframes myAnimation {
0% {
width: 100px;
}
30% {
width: 200px;
}
60% {
width: 250px;
}
100% {
width: 300px;
}
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
CSS中的动画的更多相关文章
- Css中的变形及过渡动画
在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- css中animation和@keyframes 动画
Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...
- CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画
最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- requestAnimationFrame，Web中写动画的另一种选择
HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...
- CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...
随机推荐
- push本地代码到github发生错误的解决办法
有一天,我在github上编写好了README.md这个文件,接着发现本地有段代码忘记上传了,于是熟练的输入git add . git commit -m "modify",以 ...
- AMD，CMD，UMD 三种模块规范 写法格式
一下三块均以 foo.js 为示例文件名,以 jQuery,underscore 为需求组件 ADM:异步模块规范, RequireJs 的支持格式 // 文件名: foo.js define(['j ...
- 阿里云安装jdk报错gzip: stdin: unexpected end of file
在阿里云上面安装jdk时候报了这个问题,如下图所示 然后看了下jdk应该是有150多M的,但是阿里云上面的只有1M多,删除 重新下载... tar zxvf jdk 好了
- sqlserver2008 insert语句性能
在sqlserver2008中“新建查询”,执行批量添加语句的执行时间: declare @i int ) begin INSERT INTO [xxx].[dbo].[北京万奇亚讯科技_QueryL ...
- ES6/ES2015常用知识点和概念
越来越多的开源库开始使用ES2015来构建代码了,大家知道ES6=ES2015,ES6在2015年被ECMAScript标准化组织approve,各大浏览器厂商要完全支持ES6的强大功能还须一些时日, ...
- Java API 常用 详解
Runtime类的使用:可以查看内存信息,系统变量,执行系统软件命令,备份数据库相关操作
- Tomcat你很少使用的安全管理SecurityManager
试想一下,如果你的JSP页面中包含一句代码“System.exit(1);”,你的web应用访问到该JSP时,会发生什么? 一般使用tomcat可能都没有注意到这个问题,本篇主要讲述tomcat 6中 ...
- DevExpress GridControl如何取消默认的显示方式
DevExpress GridControl如何取消默认的显示方式,就是表格中好像还嵌套了一个表格,下面有个折叠‘+’按钮,我需要显示的是就是单表格的样式效果. 默认的样式如图: 我需要显示的效果图: ...
- mysql主从同步与防火墙端口的设定
一.背景: 之前做主从同步时,把从库防火墙关了,现在开启防火墙后,从库不同步了 二.解决思路: 1.首先查看了mysql占用的端口,然后开启,tcp/udp都开了,结果还是不行 firewall-cm ...
- 两种MVC框架比较
基于Web的MVC framework在J2EE的世界内已是空前繁荣. TTS网站上几乎每隔一两个星期就会有新的MVC框架发布.目前比较好的MVC,老牌的有Struts.Webwork.新兴的MVC框 ...