css3 transition 动画基础
来源:互联网 发布:gephi数据分析案例 编辑:程序博客网 时间:2024/06/10 05:54
transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”
一、transition语法:
transition:[<transition-property>||<transition-duration>||<transition-timing-function>||<transition-delay>||<transition-property>||<transition-duration>||<transition-timing-function>||<transition-delay>]
transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。
1、变化的属性:transition-property
transition-property : none | all | [<IDENT>][','<IDENT>]* ;
transition-property是用来指定当元素其中一个属性改变时执行transition效果,其中none没有属性改变;all所有属性都改变,它也是默认值;indent元素属性名,其对应的类型如下:
2、动画时间:transition-duration
transition-duration : <time> [,time]*;
transition-duration是动画执行的时间,单位为s(秒),比如0.1秒可以写成“0.1s”或者“.1s”,它可以作用于任何元素,包括:before和:after伪元素。
3、动画执行的方式:transition-timing-function
transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;
ease:逐渐慢下来;linear:匀速;ease-in:由慢到快;ease-out:由快到慢;ease-in-out:先慢到快再到慢。
4、动画延迟:transition-delay
transition-delay : <time> [,time]* ;
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition动画效果,取值同transition-duration。
二、实例动画
step1:改变字体颜色
<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>
h1 a{color:#03c;text-decoration:none;-webkit-transition:color .5s ease-in-out;-moz-transition:color .5s ease-in-out;-o-transition:color .5s ease-in-out;transition:color .5s ease-in-out;}h1 a:hover{color:#f60;}
step2:改变背景颜色
<h2>专注于web前端开发</h2>
h2:hover{-webkit-transition:background-color 0.5s linear;-moz-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;background-color:#ccc;}
step3:转换多个属性
作用transition进行多个属性转换:
<div class="div">辛苦遭逢起一经,干戈寥落四周星。山河破碎风飘絮,身世浮沉雨打萍。惶恐滩头说惶恐,零丁洋里叹零丁。人生自古谁无死?留取丹心照汗青</div>
.div {padding:5px;color:#fff;background-color:#666;-webkit-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;-moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;-o-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;transition:color 1s ease-in-out, background-color 0.5s ease-in-out;}.div:hover {color:#333;background-color:#ccc;}
渐变效果还有另外一种写法:
.div {-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}
第一种写法里面把各个属性都写了出来,而第二种里面用all代替,也就是变换所有属性。
demo:http://rainleaves.com/demo/transition/transition.html 前三个为transition动画实例,后四个为transform实例。
- css3 transition 动画基础
- css3 transition 动画基础
- css3 transition 动画基础
- Css3 Transition动画效果
- CSS3 动画 Transition
- CSS3 Transition 动画效果
- css3过渡动画transition
- css3 transition 动画
- CSS3动画 animation transition
- CSS3过渡动画transition详解
- 详解CSS3 Transition动画效果
- css3动画效果transform transition
- CSS3动画—— transition
- css3 动画之transition,animation
- CSS3 transition transform 动画实现天气预报显示
- CSS3 transition transform 动画实现天气预报显示
- css3动画属性--transition(转换)
- 使用transform和transition制作CSS3动画
- spring boot(11)-druid监控
- WifiMonotor.java
- centos 找回密码
- 关于本博客
- spring boot(12)-数据源配置原理
- css3 transition 动画基础
- 计蒜客 Frequent Subsets Problem&&2017 Icpc南宁赛
- spring boot(13)-logback和access日志
- linux中awk进行日志文本的处理过滤
- JDBC获取数据表字段名、注释等信息
- spring boot(14)-pom.xml配置
- java设计模式-单例模式
- nginx+tomcat简单配置
- 7-28 搜索树判断(25 分)