码迷,mamicode.com
首页 > Web开发 > 详细

CSS Transition (变换动画)

时间:2014-09-01 15:28:23      阅读:473      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   使用   strong   ar   

最近学习CSS的过程中,发现了不少有用的东西。包括一些神奇的,纯CSS的特效,只需简单的几笔即可完成jQuery实现的效果。

CSS 3 中提供了一种属性,Transition(变换),这种属性能够实现在元素的某些属性的数值发生改变时产生过渡的效果。比如长度增加,能产生类似拉长的动画效果;颜色改变时,也可以利用Transition产生一种颜色渐变的效果。

  • 转载原链接地址:http://blog.netsh.org/posts/css-transition-animate-tutorial_522.netsh.html

浏览器支持情况

CSS Transition受到浏览器的广泛支持。

Chrome 2+(-webkit-transition)
Firefox3.7+(-moz-transition)
Safari 3.1+(-webkit-transition)
Opera 10.5+(-o-transition)

From:axiu.me

不过经过我的观察,现在IE还是不能支持,即使是在IE9中。不过也没有关系,至少并不会出现什么令人感觉糟糕的结果。

CSS变换的由来

CSS Transition曾经是只属于Apple Safari Webkit的东西,仅能由Safari UI实现的动画效果。

可是W3C有部分工作人员认为变换动画是脚本该做的事情而不是CSS,不过去年三月份,来自Apple、Mozilla开始将CSS变换模块添加到CSS 3特性里面,非常接近原来Safari Webkit的效果。由此得来CSS Transition。

书写方法

在CSS代码中,要使用Transition属性需要这么书写:

-moz-transition: // Firefox

-webkit-transition: // Safari、Chrome

-o-transition: // Opera

transition: //官方标准

建议在书写时,将上述全写上。

效果之:颜色变换

使用Transition可以实现颜色的变换,比如一个锚链接的鼠标移上产生颜色渐变动画:

其核心代码如下:

a:hover {
 color: red;
 background-color: rgb(255,204,255);
 -webkit-transition: color .5s linear, background-color .5s linear; 
 transition: color .5s linear, background-color .5s linear; 
}

效果之:拉伸、伸缩效果


其核心代码如下:

#example2 {
	height:200px; 
}
#example2 a:link {
color: blue;
text-decoration: none;
-webkit-transition: color .25s ease-in 0s;
transition: color .25s ease-out 0s; 
}
#example2 a:hover {
color: red;
-webkit-transition: color .25s ease-in .1s;
transition: color .25s ease-out .1s; 
}
#example2 a:active {
color: green;
transition: color .25s ease; 
}
#example2 ul {
list-style: none;
margin: 0;
padding: 0;
}
#example2 .menu {
display: block;
position: relative;
top: .9em;
left: 0;
padding: 10px;
height: auto;
width: 100px;
border: 8px solid rgba(204,204,204,.5);
cursor: pointer;
background-color: rgba(255,255,255,.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#example2 ul.menu  li {
font-weight: normal;
list-style: none;
margin:0
}
#example2 ul.menu  li a:link {
font-weight: normal;
list-style: none;
font-size: 12px;
margin-left: 0;
padding-left: 0;
}
#example2 ul.menu ul li {
font-weight: normal;
padding: 5px 0;
margin:0;
border-top: 1px solid rgb(204,204,204);
background-color: rgb(255,255,255);
-webkit-transition: background-color .5s ease; 
transition: background-color .2s ease; 
}
#example2 .drop {
display: block;
position: relative;
height: 0;
overflow: hidden;
width: 100px;
opacity: 0;
-webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s;
transition: opacity .25s linear 0s, height .25s ease-out .1s;  
}
#example2 ul.menu ul li:hover {
background-color: rgb(234,234,234);
-webkit-transition: background-color .5s ease; 
transition: background-color .2s ease; 
}
#example2 ul.menu:hover .drop {
height: 140px;
opacity: 1;
-webkit-transition: opacity .25s linear 0s,  height .25s linear 0s;
transition: opacity .25s linear 0s,  height .25s linear 0s; 
}

效果之:位置移动

你可以试想,如果在发生位置之间的改变时,如果使用Transition属性,则可以做到过渡移动的动画效果,这非常像是脚本做出的事情。

位置移动

按住鼠标不放

bubuko.com,布布扣

其核心代码如下:

#example3 {
	background-color: black;
	color: white;
}
#example3 .control {
	text-align: center; font-size: 3em;
}
#example3 .move { cursor: pointer;}
#example3 .move>#astro {
	position: relative;
	top: 0;
	left: 250px;
	-webkit-transition: top 2s ease-in-out, left 2s ease;
	transition: top 2s  ease-in-out, left 2s ease;
}
#example3 .move:active>#astro {
	top: 10px;
	left: 10px;
	-webkit-transition: top 2s ease-in-out, left 2s ease;
	transition: top 2s  ease-in-out, left 2s ease;
}

补充

同时添加多种变换

如果你希望你的元素的颜色、背景都发生渐变,例如:

a:hover {
  color: red;
  background-color: pink;
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  -webkit-transition: background-color .15s linear .1;
  transition: background-color .15s linear .1;
}

这并不能达到目的,后面的将会覆盖掉前面的,因此方法是使用逗号同时使用多种变换效果:

a:hover {
  color: red;
  background-color: pink;
   -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
 }

变换计时与延迟

如果你希望自定义你的变换效果,比如你希望自定义动画改变的速率,CSS提供了如下关键字可以添加在位尾后:

名称 如何工作
cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。
linear 均速
ease 逐渐慢下来
ease-in 加速(渐入)
ease-out 减速(淡出)
ease-in-out 加速然后减速

附录:可以发生变换的属性

那些属性可以变换呢?几乎除了box-shadow以外,其他的都可以发生变换。

CSS属性 改变的对象
background-color 色彩
background-image 只是渐变
background-position 百分比,长度
border-bottom-color 色彩
border-bottom-width 长度
border-color 色彩
border-left-color 色彩
border-left-width 长度
border-right-color 色彩
border-right-width 长度
border-spacing 长度
border-top-color 色彩
border-top-width 长度
border-width 长度
bottom 百分比,长度
color 色彩
crop 百分比
font-size 百分比,长度
font-weight 数字
grid-* 数量
height 百分比,长度
left 百分比,长度
letter-spacing 长度
line-height 百分比,长度,数字
margin-bottom 长度
margin-left 长度
margin-right 长度
margin-top 长度
max-height 百分比,长度
max-width 百分比,长度
min-height 百分比,长度
min-width 百分比,长度
opacity 数字
outline-color 色彩
outline-offset 整数
outline-width 长度
padding-bottom 长度
padding-left 长度
padding-right 长度
padding-top 长度
right 百分比,长度
text-indent 百分比,长度
text-shadow 阴影
top 百分比,长度
vertical-align 百分比,长度,关键词
visibility 可见性
width 百分比,长度
word-spacing 百分比,长度
z-index 正整数
zoom 数字

谢谢收看。

CSS Transition (变换动画)

标签:style   blog   http   color   os   io   使用   strong   ar   

原文地址:http://www.cnblogs.com/xiaoky/p/3949154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!