css3的过渡transition

来源：互联网发布：天天饮食软件编辑：程序博客网时间：2024/05/21 12:46

css3中使用过渡功能可以使元素的css属性值在一定时间区间内平滑过渡，可在元素被点击，hover，做焦点，或对元素做任何改变时触发。例如hover时，可从一种颜色平滑过渡到另一种颜色。

一.写法

例如,下面的div原来的宽度是100px, 在hover的时候将其宽度width，在1s内，匀速变为200px，等待2s再变化

div:hover
{
width:200px;
}
</style>

可见，transition:指定变化需要过渡的属性变形所需时间变形方式变化等待时间

1.指定需要过渡的属性transition-property，可写为：

none 不对任何属性变化进行过渡

all 对所有属性变化进行过渡

属性名1,属性名2 如： width,color,background

2.过渡所需秒数transition-duration 2s 表示2秒

3.过渡方式transition-timing-function有

值描述linear匀速过渡（等于 cubic-bezier(0,0,1,1)）。ease慢速开始，再变快，然后慢速结束（cubic-bezier(0.25,0.1,0.25,1)）。ease-in以慢速开始（等于 cubic-bezier(0.42,0,1,1)）。ease-out以慢速结束（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out以慢速开始和结束（等于 cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4.过渡等待的秒数transtion-delay 5s 指示过渡在5s后开始

二.指定多个属性不同的过渡时间和过渡方式

例如： transition: color 1s linear 0 , width 2s ease-in 1s

表示过渡方式是首先color匀速变化用时1秒，1秒后width加速变化用时2秒。可写多个，以逗号分隔即可。

三.transition设定的四个参数其实是同时设置了如下四个属性，这四个属性可单独设置，如下：

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;

/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;

/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

四.例子

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>旋转着变大</title>    <style>        div{            border-radius:5px;            width: 90px;            height:60px;            background-color: yellowgreen;            color:white;            text-align: center;            /*指定变形如何过渡*/            transition:background-color,transform 1s linear 0s;            -moz-transition:background-color,transform 1s linear 0s;            -webkit-transition:background-color,transform 1s linear 0s;            -o-transition:background-color,transform 1s linear 0s;        }        div:hover{            background-color: blue;            /*指定变形方式*/            -ms-transform: rotate(360deg) scale(1.2,1.2) ;            -moz-transform:rotate(360deg) scale(1.2,1.2);            -webkit-transform:rotate(360deg) scale(1.2,1.2);            -o-transform:rotate(360deg) scale(1.2,1.2);            transform:rotate(360deg) scale(1.2,1.2);        }    </style></head><body><h1>用1秒钟时间 顺时针旋转360度 同时把宽高放大到原来的1.2倍</h1><div>   <br>   Css3过渡</div></body></html>

0 0