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. 12. KEY_COLUMN_USAGE

    12. KEY_COLUMN_USAGE KEY_COLUMN_USAGE表描述哪些键列具有约束. KEY_COLUMN_USAGE表有以下列: CONSTRAINT_CATALOG :约束所属目录的 ...

  2. kvm虚拟机的克隆以及快照

    克隆(常见有3种方法) 1 直接克隆(克隆虚拟机使用自己的磁盘) virt-clone -o vm-01 -n vm-02 -f /kvm/os/vm-02.qcow2 virsh start vm- ...

  3. 使用window.open打开新窗口被浏览器拦截的解决方案

    问题描述: 代码中直接使用window.open('//www.baidu.com', '_blank');会被浏览器窗口拦截 原因浏览器为了维护用户安全和体验,在JS中直接使用window.open ...

  4. 剑指Offer（书）：数组中重复的数字

    题目:找出数组中重复的数字. 说明:在一个长度为n的数组里的所有数字都在0~n-1的范围内,数组中某些数字是重复的,但是不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重复的数 ...

  5. LeetCode（87） Gray Code

    题目 The gray code is a binary numeral system where two successive values differ in only one bit. Give ...

  6. Saving James Bond - Easy Version 原创 2017年11月23日 13:07:33

    06-图2 Saving James Bond - Easy Version(25 分) This time let us consider the situation in the movie &q ...

  7. 算法导论 第十三章 红黑树（python）-1插入

    红黑树是上一章二叉搜索树的改进,实现一种平衡 ,保证不会出现二叉树变链表的情况,基本动态集合操作的时间复杂度为O(lgn) 实际用途:c++stl中的set,map是用他实现的 红黑树的性质: 1.每 ...

  8. C++中，什么叫类，结构，联合？

    在C++中 class 和 struct 本质上一样 可以互用class的成员默认是private的,struct的成员默认是public的但一般习惯把成员变量隐藏的用class申明, 成员变量可以公 ...

  9. hdu 1421经典dp

    #include<stdio.h> #include<stdlib.h> #define N 2001 #define inf 0x3fffffff int a[N],dp[N ...

  10. php 压缩数据存储

    php 压缩数据存储 当接收到大量的数据时,存储到数据库和从数据库读取时,时间都比较慢,所以压缩一下入库可能会好一点. 仅供参考!!! 封装的压缩数据函数: /** * 压缩数据 * @param s ...