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实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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可生成缩略图的文件上传类实例
2014/12/17 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
JavaScript实现短暂提示框功能
2018/04/04 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python处理Excel文件实例代码
2017/06/20 Python
Python定时器实例代码
2017/11/01 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
详解python的变量缓存机制
2021/01/24 Python
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
交通安全标语
2014/06/06 职场文书
计算机求职信
2014/07/02 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
2014年团工作总结
2014/11/27 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
研讨会通知
2015/04/27 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL