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. css 图片等宽等高

    html <div class="autoimg"> <img src="xxx.jpg" /> </div> css .a ...

  2. NYOJ 1875 畅通工程再续 （无节点间距离求最小生成树）

    Description 相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问题当然是交通问题 ...

  3. 利用virtualbox中的虚机制作主机启动盘

    制作镜像的过程: 第一步:1.Windows下先下载安装virtualbox usb3.0驱动:https://download.virtualbox.org/virtualbox/5.2.20/Or ...

  4. MyISAM和InnoDB索引实现对比

    MyISAM索引实现 MyISAM引擎使用B+Tree作为索引结构,叶节点的data域存放的是数据记录的地址.如图:  这里设表一共有三列,假设我们以Col1为主键,则上图是一个MyISAM表的主索引 ...

  5. 【07】QQ群管理公告小结：

    [07]QQ群管理公告小结:   01,请看公告遵守相关规定. 02,群内除QQ自带的缺省表情外(不是QQ的VIP或大图表情),禁止发送大表情,大图片(展示问题的屏幕截图除外),   03,修改群名片 ...

  6. BeautifulSoup4系列二

    前言 本篇详细介绍beautifulsoup4的功能,从最基础的开始讲起,让小伙伴们都能入门 一.读取HTML页面 1.先写一个简单的html页面,把以下内容copy出来,保存为html格式文件 &l ...

  7. 大数据学习——hive数据类型

    1. hive的数据类型Hive的内置数据类型可以分为两大类:(1).基础数据类型:(2).复杂数据类型2. hive基本数据类型基础数据类型包括:TINYINT,SMALLINT,INT,BIGIN ...

  8. 【Dijstra堆优化】HDU 3986 Harry Potter and the Final Battle

    http://acm.hdu.edu.cn/showproblem.php?pid=3986 [题意] 给定一个有重边的无向图,T=20,n<=1000,m<=5000 删去一条边,使得1 ...

  9. hdu 1711kmp裸题

    #include<stdio.h> #define N 1000050 int text[N],t[N],next[N],n,m; void getnext() { int j=0,k=- ...

  10. Animation显示ListView的每一条记录

    activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...