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中的动画的更多相关文章

  1. Css中的变形及过渡动画

    在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...

  2. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  5. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

    最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...

  6. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  7. requestAnimationFrame,Web中写动画的另一种选择

    HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...

  8. CSS3中的动画功能(一)

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  9. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

随机推荐

  1. 调用Linux的busybox,通过linux命令来获取AndRoidIP

    //根据busybox获取本地Mac public static String getLocalMacAddressFromBusybox(){ String result = "" ...

  2. golang构造函数

    http://blog.jobbole.com/107442/?utm_source=blog.jobbole.com&utm_medium=relatedPosts https://gocn ...

  3. jQuery Validate 无法验证 chosen-select元素

    chosen-select元素执行了chosen()方法后,为select元素加上了style="display: none;"进行隐藏,然后重新构造了一个看起来像select的下 ...

  4. [问题记录]libpomelo的安装

    1. 描述: 按照github上的操作完成 Windows in your libpomelo project root directory open git bash and type in mkd ...

  5. Centos大文件切割和合并

    现在很多公司都会把项目放在云服务器上,当我想把云服务器里面的代码和生成的文件 “sz 文件名称” down下来的时候,发现太大.云服务器不支持下载很大的文件.那么这种情况就需要使用split命令切割文 ...

  6. ZT ---- 给孩子的信(孩子写给爸爸妈妈的信在24、25、26楼)

    胡同口 > 情感 > 婚后空间 > 给孩子的信(孩子写给爸爸妈妈的信在24.25.26楼) 给孩子的信(孩子写给爸爸妈妈的信在24.25.26楼)分享: 腾讯微博 新浪微博 QQ空间 ...

  7. 配置管理SVN软件具体操作

    配置管理(SVN) CM:configuration management  配置管理人员 什么是SVN SVN --Subversion --是一个开放源代码的版本控制系统 --时下流行的有SVN和 ...

  8. 在powerdesigner 中出现Could not Initialize JavaVM! 应该怎么解决

    利用powerdesigner反向生成表结构时会报这个错: 请检查你的环境变量配置: 系统变量 CLASSPATH = E:\Workspaces\my-jar\mysql-connector-jav ...

  9. springMVC文件上传大小超过限制的问题

    [转自]https://my.oschina.net/ironwill/blog/646762 springMVC是一个非常方便的web层框架,我们使用它的文件上传也非常的方便. 我们通过下面的配置来 ...

  10. Jenkins+maven(testng)项目(本地项目配置)

    一.前提: 1. Jenkins下载安装. 2. testng的Maven项目. 二.检测: maven项目自身配置及检测. 1. POM.XML配置文件增加: <build> <p ...