CSS3的transition和animation的用法实例介绍


Posted in HTML / CSS onAugust 20, 2014

transition

transition 属性是
transition-property,
transition-duration,
transition-timing-function,
transition-delay
的简称,用于设定一个元素的两个状态,不同的状态可以用伪类,比如:hover, :active 或者是通过 javascript 动态设定。IE10+支持。

所以 transition 的初始值为:

transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;

用法

div {
transition: <property> <duration> <timing-function> <delay>;
}

并且有事件可以监测 transition 结束

el.addEventListener("transitionend",updateTransition,true);

//in webkit
el.addEventListener("webkitTransitionEnd",updateTransition,true);

实例

HTML

复制代码
代码如下:

<!-- DEMO 1: Fade Block -->
<div id="fade">
move here !
</div>
<div id="nudge">
mouse on me
</div>
<div id="bounce">Place mouse on me i will bounce!</div>
<div id="spin">Place mouse on me i won me i won me i won me i won me i won me i won me i won me i won me i won me i won me i won me i won me i won me i won me i will spin</div>
<div id="accordion" class="accordion">
<a href="#first">This is first tab</a>
<div id="first"><p>Lorem ipsum </p> </div>
<a href="#second">This is second tab</a>
<div id="second"><p>Lorem ipsum </p> </div>
<a href="#third">This is third tab</a>
<div id="third"><p>Lorem ipsum </p> </div>
</div>

CSS
复制代码
代码如下:

/*
DEMO 1: Fade Block
*/
div {
margin-bottom: 50px;
}
#fade {
/*opacity:1;
-webkit-transition: opacity 10s liner 10s;*/
position: relative;
transition-property: font-size;
transition-duration: 0.5s;
transition-delay: 0;
font-size: 14px;
}
#fade:hover {
font-size: 36px;
}

/* DEMO2 */
#nudge{
-webkit-transition-property: color,
background-color,padding-left;
-webkit-transition-duration: 500ms,500ms, 500ms;
}
#nudge:hover{
background-color: #efefef;
color: #333;
padding-left: 50px;
}
#bounce:hover {
-webkit-animation-name:bounce;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:2;
-webkit-animation-direction:alternate
}
@-webkit-keyframes bounce {
from{margin-left:0;}
to{margin-left:250px;}
}
#spin{
-webkit-transition: -webkit-transform 10s ease-in;
}
#spin:hover{
-webkit-transform: rotate(36000deg);
}
.accordion a{
display: block;
padding:5px 10px;
background-color:#ccc;
color:#000;
/*可以去掉链接的下划线等修饰效果*/
text-decoration:none;
}
.accordion a:hover{
background-color:#999;
}
.accordion div{
background-color:#cda;
color:#222;
}
.accordion div p{
padding:20px
}
#accordion div{
/*先隐藏起来*/
height:0;
overflow:hidden;
-webkit-transition:height 600ms ease;
}
#accordion div:target{
height:110px;
}


animation

animation 属性是如下这些属性的简写
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none

用法

animation:
animation-name
time(duration)
timing-function
time(delay)
animation-iteration-count( 结束之前的循环次数)
single-animation-direction
/*{
animation-direction: normal (每次从正方向开始)
animation-direction: reverse (每次从反方向开始)
animation-direction: alternate (正反往复)
}*/
single-animation-fill-mode

实例

复制代码
代码如下:

<div class="view_port">
<div class="polling_message">
Listener for dispatches
</div>
<div class="cylon_eye">
</div>
</div>
.polling_message {
color: white;
float: left;
margin-right:2%;
}
.view_port {
background-color: black;
height: 50px;
width: 100%;
overflow: hidden;
}
.cylon_eye {
color: white;
height: 100%;
width: 80%;
background-color: red;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
-webkit-animation: move_eye 4s linear 0s infinite alternate;
-moz-animation: move_eye 4s linear 0s infinite alternate;
-o-animation: move_eye 4s linear 0s infinite alternate;
animation: move_eye 4s linear 0s infinite alternate;
}
@-webkit-keyframes move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}
@-moz-keyframes move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}
@-o-keyframes move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}
@keyframes move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}
HTML / CSS 相关文章推荐
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 #HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 #HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 #HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 #HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 #HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 #HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 #HTML / CSS
You might like
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP实现合并discuz用户
2015/08/05 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
详细分析python3的reduce函数
2017/12/05 Python
TensorFlow如何实现反向传播
2018/02/06 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
ajax是什么及其工作原理
2012/02/08 面试题
考试不及格的检讨书
2014/01/22 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android