css3动画 transition、animation

CSS3 transition

demo

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>css3 transition</title>

	</head>

	<body>

		<style type="text/css">

			span {

				position: absolute;

				top: 30px;

				left: 50px;

				width: 200px;

				height: 200px;

				background: gold;

				color: #000000;

				font-size: 12px;

				transition: width 10s,background-color 10s, height 10s, left 10s, top 10s, font-size 10s, line-height 10s;

				-webkit-transition: width 10s,background-color 10s, height 10s, left 10s, top 10s, font-size 10s, line-height 10s;

			}

			span:hover {

				top: 300px;

				left: 500px;

				width: 100px;

				height: 100px;

				font-size: 35px;

				background: green;

			}

		</style>

		<span>aaa</span>

	</body>

</html>

说明：

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
值 描述
默认值： all 0 ease 0
JavaScript 语法： object.style.transition="width 2s"

语法

transition: property duration timing-function delay;
值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称。 如：transition-property:width;
transition-duration 规定完成过渡效果需要多少秒或毫秒。如：transition-duration: 5s;
transition-timing-function 规定速度效果的速度曲线。如：transition-timing-function: linear;
transition-delay 定义过渡效果何时开始。如： transition-delay: 2s; 在过渡效果开始前等待 2 秒：

transition-timing-function 速度曲线属性说明

定义和用法

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

值 描述
默认值： ease
JavaScript 语法： object.style.transitionTimingFunction="linear"

语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n);
值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

提示：请在实例中测试不同的值，这样可以更好地理解它们的工作原理。

demo

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:50px;

background:red;

color:white;

font-weight:bold;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

/* Firefox 4: */

#div1 {-moz-transition-timing-function: linear;}

#div2 {-moz-transition-timing-function: ease;}

#div3 {-moz-transition-timing-function: ease-in;}

#div4 {-moz-transition-timing-function: ease-out;}

#div5 {-moz-transition-timing-function: ease-in-out;}

/* Safari and Chrome: */

#div1 {-webkit-transition-timing-function: linear;}

#div2 {-webkit-transition-timing-function: ease;}

#div3 {-webkit-transition-timing-function: ease-in;}

#div4 {-webkit-transition-timing-function: ease-out;}

#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Opera: */

#div1 {-o-transition-timing-function: linear;}

#div2 {-o-transition-timing-function: ease;}

#div3 {-o-transition-timing-function: ease-in;}

#div4 {-o-transition-timing-function: ease-out;}

#div5 {-o-transition-timing-function: ease-in-out;}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div id="div1" style="top:100px">linear</div>

<div id="div2" style="top:150px">ease</div>

<div id="div3" style="top:200px">ease-in</div>

<div id="div4" style="top:250px">ease-out</div>

<div id="div5" style="top:300px">ease-in-out</div>

<p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

demo2

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:50px;

background:red;

color:white;

font-weight:bold;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

#div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Firefox 4: */

#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Safari and Chrome: */

#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Opera: */

#div1 {-o-transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div id="div1" style="top:100px">linear</div>

<div id="div2" style="top:150px">ease</div>

<div id="div3" style="top:200px">ease-in</div>

<div id="div4" style="top:250px">ease-out</div>

<div id="div5" style="top:300px">ease-in-out</div>

<p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

多个属性写法

 a {

    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;

    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;

    -o-transition: background 0.5s ease-in,color 0.3s ease-out;

    transition: background 0.5s ease-in,color 0.3s ease-out;

  }

原文: http://www.w3cplus.com/content/css3-transition

所有属性写法

  a {

    -moz-transition: all 0.5s ease-in;

    -webkit-transition: all 0.5s ease-in;

    -o-transition: all 0.5s ease-in;

    transition: all 0.5s ease-in;

  }

原文: http://www.w3cplus.com/content/css3-transition © w3cplus.com

要加前缀

animation @keyframes

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}
值 描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称

  • 规定动画的时长

animation

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

实例

div{

	animation:mymove 5s infinite;

	-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

}

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

值 内容
默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation="mymove 5s infinite"

语法：

animation: name duration timing-function delay iteration-count direction;
值 内容
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

demo

<!--

	author：xuess

	email：wuniu2010@126.com

	date：2017-08-11

-->

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>小球运动</title>

	</head>

	<body>

		<style type="text/css">

			#ball {

				background: #F0A8BD;

				height: 100px;

				width: 100px;

				position: absolute;

				top: 10px;

				left: 20px;

				border-radius: 50%;

				animation: bounce 2s infinite;

			}

			#ball1 {

				background: #00008B;

				height: 100px;

				width: 100px;

				position: absolute;

				top: 10px;

				left: 200px;

				border-radius: 50%;

				animation: bounce1 2s infinite;

			}

			#ball2 {

				background: #008000;

				height: 100px;

				width: 100px;

				position: absolute;

				top: 10px;

				left: 400px;

				border-radius: 50%;

				animation: bounce2 2s infinite;

			}

			@-webkit-keyframes bounce2 {

				0 % {

					transform: translate3d(0, 20px, 0);

					animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);

				}

				50% {

					transform: translate3d(0, 300px, 0);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

				100% {

					transform: translate3d(0, 20px, 0);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

			}

			@keyframes bounce2 {

				0 % {

					transform: translate3d(0, 20px, 0);

					animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);

				}

				50% {

					transform: translate3d(0, 300px, 0);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

				100% {

					transform: translate3d(0, 20px, 0);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

			}

			@-webkit-keyframes bounce1 {

				0 % {

					transform: translate(0, 20px);

					animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);

				}

				50% {

					transform: translate(0, 300px);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

				100% {

					transform: translate(0, 20px);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

			}

			@keyframes bounce1 {

				0 % {

					transform: translate(0, 20px);

					animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);

				}

				50% {

					transform: translate(0, 300px);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

				100% {

					transform: translate(0, 20px);

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

			}

			@-webkit-keyframes bounce {

				0 % {

					top: 20px;

					animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);

				}

				50% {

					top: 300px;

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

				100% {

					top: 20px;

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

			}

			@keyframes bounce {

				0 % {

					top: 20px;

					animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);

				}

				50% {

					top: 300px;

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

				100% {

					top: 20px;

					animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);

				}

			}

		</style>

		<div id="ball"></div>

		<div id="ball1"></div>

		<div id="ball2"></div>

	</body>

</html>

转载请注明出处

作者：xuesswuniu2010@126.com

时间：2017年08月11日

最后修改时间：2017年08月11日

css3动画入门transition、animation的更多相关文章

  1. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  2. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  3. css3动画：transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  4. 30分钟玩转css3动画， transition，animation

    其实css3动画是就是2种实现,一种是transition,另一种就是animation.transition实现的话就是只能定制开始帧,和结束2帧:而animation实现的话可以写很多关键帧.没有 ...

  5. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  6. Css3动画-@keyframes与animation

    一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...

  7. CSS3动画效果之animation

    先解决上一篇的遗留问题. div { width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s; ...

  8. CSS3动画 相比JS Animation 哪个更快?

    CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应 ...

  9. CSS3动画属性之Animation

    首先定义一个动画规则: @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox ...

随机推荐

  1. Linux 之 nano 编辑器的使用

    在Linux操作系统中,有很多的文本编辑器,最为重要的就是vi文本编辑器,下面来介绍一个简单的nano文本编辑器.nano的使用简单,我们可以直接加上文件名就能够打开一个旧文件或新文件,我们可以打开一 ...

  2. js event loop事件循环

    浏览器环境 以下两段代码是等价的.req对事件的回调设置,实际上就是当前主线程任务队列的任务. var req = new XMLHttpRequest(); req.open('GET', url) ...

  3. spring-mvc junit测试

    import org.junit.runner.RunWith; import org.springframework.test.context.ContextConfiguration; impor ...

  4. 小白菜OJ 1122 公牛母牛配（最大二分图匹配模板）

    题意: n只公牛和m只母牛,某些公牛和某些母牛互相喜欢.但最后一只公牛只能和一只母牛建立一对一匹配.要使得最后牛群匹配对数最大. 链接: http://caioj.cn/problem.php?id= ...

  5. 【转】Entity Framework6 with Oracle（可实现code first）

    Oracle 已在2014年底提供对EF6的支持.以前只支持到EF5.EF6有很多有用的功能 值得升级.这里介绍下如何支持Oracle   一.Oracle 对.net支持的一些基础知识了解介绍. 1 ...

  6. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  7. Flask---ajax(jquery)交互

    目录结构如下: |--| |--run.py |--static |--test.txt |--templates |--index.html 前端代码如下: index.html <!DOCT ...

  8. HDU1754-I Hate It,线段数水题~~2016.4.11

    I Hate It                                                                                           ...

  9. PTA 02-线性结构3 Reversing Linked List (25分)

    题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/664 5-2 Reversing Linked List   (25分) Given a ...

  10. POJ 1985 Cow Marathon【树的直径】

    题目大意:给你一棵树,要你求树的直径的长度 思路:随便找个点bfs出最长的点,那个点一定是一条直径的起点,再从那个点BFS出最长点即可 以下研究了半天才敢交,1.这题的输入格式遵照poj1984,其实 ...