CSS 3 Transition(变换)
来源:互联网 发布:淘宝做分销怎么样 编辑:程序博客网 时间:2024/06/16 01:04
浏览器支持情况
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中。不过也没有关系,至少并不会出现什么令人感觉糟糕的结果。(来源:http://blog.netsh.org/posts/css-transition-animate-tutorial_522.netsh.html#)
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; }
效果之:拉伸、伸缩效果
- About Us
其核心代码如下:
#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属性,则可以做到过渡移动的动画效果,这非常像是脚本做出的事情。
位置移动
按住鼠标不放
其核心代码如下:
#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 3 Transition(变换)
- CSS Transition (变换动画)
- css - transition
- CSS-transition
- 简单图片3D变换动画的制作(使用transition、transform)
- 用 transition 尝鲜 CSS 3 动画
- CSS属性之过渡(transition)属性
- 深入理解共享元素变换(Shared Element Transition)-上
- 深入理解共享元素变换(Shared Element Transition)-上
- hover 背景颜色或者图片的平滑变换(transition)
- 深入理解共享元素变换(Shared Element Transition)-上
- 深入理解共享元素变换(Shared Element Transition)
- CSS 3D变换
- css 动画效果 -- transition
- css transition属性详解
- CSS过渡 && bootstrap transition
- CSS:Transform和Transition
- CSS之transition
- cocos2dx 3.3 Lua 实现倒计时功能
- 2014年ACM/ICPC亚洲区现场赛广州赛区总结
- Android开发教程四大组件详解
- Android Studio 1.0 初体验
- 399元八核平板? 七彩虹G708八核评测
- CSS 3 Transition(变换)
- iOS之UIScrollView的使用
- klfdjsg lkjfdlks
- C小程序 - fork理解
- 关于C和C++输入缓冲区的问题
- cocos2d-x3.2如何添加LIb库及头文件的步骤
- 几种排序算法
- brk()和sbrk()的简单练习
- 信号知识简单梳理