主页 > 程序开发 > JS特效 > css3 transition演示

css3 transition演示

更新时间:2015-04-13 02:12  来源:电脑技术网  作者:电脑技术网  查看评论
文章目录索引
文章简介
transition属性
transition代码演示
transition-property属性
transition-property代码演示
transition-duration属性
transition-duration代码演示
transition-timing-function属性
transition-delay属性
transition-delay代码演示

文章简介

W3C标准中对css3的transition描述“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,可能大家还是有些不理解,本文就通过一些简单的示例,简单直接暴力的演示出效果。

transition属性

  1. transition:transition-property,transition-duration,transition-timing-function,transition-delay; 

transition-property:执行变换的属性

transition-duration:变换延续的时间

transition-timing-function:在延续时间段,变换的速度

transition-delay:变换延迟时间

transition代码演示

  1. <style> 
  2. .a { 
  3.     width: 100px; 
  4.     height: 200px; 
  5.     background: #000; 
  6.      
  7.     transition-property: all;/*设置需要改变的属性,这里演示所设置的是长宽都变动*/ 
  8.     transition-duration: 10s;/*变换持续时间为10秒*/ 
  9.     transition-timing-function: linear;/*变速速度为均速*/ 
  10.     transition-delay:0s;/*变换延迟为0秒,也就是鼠标移动上去后就立即执行。*/ 
  11.     /*以上代码可以精简为以下这样 
  12.     transition:all 10s linear 0s; 宽度和高度都变动 变动时间为10秒 速度为均速 0秒后执行(当变成hover设置的样子后,鼠标再移走后2秒后开始向原来的样子变动)*/  
  13. .a:hover { 
  14.     width: 888px; /*所有的动作都是鼠标移动到a这个div上后执行。*/ 
  15.     height:888px; 
  16. </style> 
  17. <div class="a"></div> 

transition-property属性

  1. transition-property:none,all,width,height..... 

 transition-property是指定某个需要变动的元素,如果想所有变动就all即可,如果变动的是宽度就width,高就height。

transition-property代码演示

  1. <style> 
  2. .a { 
  3.     width: 100px; 
  4.     height: 200px; 
  5.     background: #000; 
  6.      
  7.     transition-property: width;/*设置需要改变的属性,这里演示所设置的是宽度,这里可以设置很多参数*/ 
  8.     transition-duration: 2s;/*变换持续时间为2秒*/ 
  9.     transition-timing-function: linear;/*变速速度为均速*/ 
  10.     transition-delay:0s;/*变换延迟为0秒,也就是鼠标移动上去后就立即执行。*/ 
  11.     /*以上代码可以精简为以下这样 
  12.     transition:widht 2s linear 0s; 宽度和高度都变动 变动时间为2秒 速度为均速 0秒后执行(当变成hover设置的样子后,鼠标再移走后2秒后开始向原来的样子变动)*/  
  13. .a:hover { 
  14.     width: 888px; /*所有的动作都是鼠标移动到a这个div上后执行。*/ 
  15.     height:888px; 
  16. </style> 
  17. <div class="a"></div> 

transition-duration属性

  1. transition-duration:s,ms;/*s为秒 ms为毫秒*/ 

transition-duration:秒数。一个元素变换成另一个元素转换过程所持续的时间。 如代码演示如所示,设置为10s就是从原本的样式改变成hover,需要10秒时间才能变成。

transition-duration代码演示

  1. <style> 
  2. .a { 
  3.     width: 100px; 
  4.     height: 200px; 
  5.     background: #000; 
  6.      
  7.     transition-property: width;/*设置需要改变的属性,这里演示所设置的是宽度*/ 
  8.     transition-duration: 10s;/*变换持续时间为10秒*/ 
  9.     transition-timing-function: linear;/*变速速度为均速*/ 
  10.     transition-delay:0s;/*变换延迟为0秒,也就是鼠标移动上去后就立即执行。*/ 
  11.     /*以上代码可以精简为以下这样 
  12.     transition:widht 10s linear 0s; 宽度和高度都变动 变动时间为10秒 速度为均速 0秒后执行(当变成hover设置的样子后,鼠标再移走后2秒后开始向原来的样子变动)*/  
  13. .a:hover { 
  14.     width: 888px; /*所有的动作都是鼠标移动到a这个div上后执行。*/ 
  15.     height:888px; 
  16. </style> 
  17. <div class="a"></div> 

transition-timing-function属性

  1. transition-timing-function:ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier; 

ease:逐渐变慢默认值

linear:匀速

ease-in:(加速)

ease-out:减速

ease-in-out:加速然后减速

cubic-bezier:该值允许你去自定义一个时间曲线。

以下是transition-timing-function几个属性的示意图。

 

transition-delay属性

  1. transition-delay:s,ms;/*s为秒 ms为毫秒*/  

 transition-delay:2s;用来指定延迟时间。即多长时间后开始执行设置的效果,执行后延迟多久再恢复原来的效果。

transition-delay代码演示

  1. <style>  
  2. .a {  
  3.     width: 100px;  
  4.     height: 200px;  
  5.     background: #000;  
  6.       
  7.     transition-property: width;/*设置需要改变的属性,这里演示所设置的是宽度*/  
  8.     transition-duration: 0s;/*变换持续时间为0秒*/  
  9.     transition-timing-function: linear;/*变速速度为均速*/  
  10.     transition-delay:2s;/*变换延迟为2秒,也就是鼠标移动上去2秒后开始执行。*/  
  11.     /*以上代码可以精简为以下这样  
  12.     transition:widht 0s linear 2s;*/   
  13. }  
  14. .a:hover {  
  15.     width: 888px; /*所有的动作都是鼠标移动到a这个div上后执行。*/  
  16. }  
  17. </style>  
  18. <div class="a"></div>  

有关transition | 的文章推荐