Transition过渡动画

最新推荐文章于 2024-04-25 16:16:15 发布

我本浪人--游吟世间

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量990

点赞数

分类专栏：前端开发文章标签： Transition过渡动画

本文链接：https://blog.csdn.net/qq_41760521/article/details/100525355

版权

前端开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

transition过渡动画

transition: property duration timing-function delay;

transition-property //规定设置过渡效果的 CSS 属性的名称。

transition-duration //规定完成过渡效果需要多少秒或毫秒。

transition-timing-function //规定速度效果的速度曲线。

transition-delay //定义过渡效果何时开始。

transition-property 规定设置过渡效果的 CSS 属性的名称。（可以实现过渡效果的属性）

transition-timing-function 规定设置过渡速率的 CSS 属性的名称。属性值详解如下：

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 之间的数值。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transition过渡</title>
    <style>
        #demo {
            width: 100px;
            height: 100px;
            background: pink;
            transition: transform 1s linear, height 0.5s linear 0.2s;
            /*哪个属性进行过渡；过渡的时间；过渡的速度；延迟时间（四个参数值）*/
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <script>
        demo.onclick = function() {
                this.style.transform = 'translateX(600px)';
                this.style.height = '200px';
            }
            /*实现瞬间移动*/
            /*加上transition属性可以实现过渡*/
    </script>
</body>

</html>

 transition: transform 4000ms linear, height 0.5s linear 2s;
            /*哪个属性进行过渡；过渡的时间；过渡的速度；延迟时间*/

可设置所有元素过渡效果:

   transition: all 4s linear;
            /*设置所有元素过渡效果*/

同样可以实现过渡效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transition过渡</title>
    <style>
        #demo {
            width: 100px;
            height: 100px;
            background: pink;
            /* transition: transform 4000ms linear, height 0.5s linear 2s; */
            /*哪个属性进行过渡；过渡的时间；过渡的速度；延迟时间*/
            transition: all 4s linear;
            /*设置所有元素过渡效果(属性值有改变的值)*/
        }
        
        #demo.move {
            transform: translateX(600px);
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <script>
        demo.onclick = function() {
                this.className = 'move';
                // this.style.transform = 'translateX(600px)';
                // this.style.height = '200px';
                // this.style.background = 'yellow';
            }
            /*实现瞬间移动*/
            /*加上transition属性可以实现过渡*/
    </script>
</body>

</html>

并不是所有的属性都可以有过渡效果:

1、有值的属性

display:none与display:block是没有过渡效果的；而opacity是可以实现过渡的。

同时颜色值也可以进行过渡。

我本浪人--游吟世间

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Transition过渡动画

transition过渡动画transition: property duration timing-function delay; transition-property//规定设置过渡效果的 CSS 属性的名称。 transition-duration//规定完成过渡效果需要多少秒或毫秒。 transition-timing-fun...
复制链接

扫一扫