css3的过渡transition

最新推荐文章于 2024-07-10 22:12:37 发布

xuanwuziyou

最新推荐文章于 2024-07-10 22:12:37 发布

阅读量982

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/48049503

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

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>

xuanwuziyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的过渡transition

css3中使用过渡功能可以使元素的css属性值在一定时间区间内平滑过渡，可在元素被点击，hover，做焦点，或对元素做任何改变时触发。例如hover时，可从一种颜色平滑过渡到另一种颜色。一.写法例如,下面的div原来的宽度是100px, 在hover的时候将其宽度width，在1s内，匀速变为200px，等待2s再变化 div{width:100px;height:10
复制链接

扫一扫

专栏目录