GraphQL jetbrains Gitlab oracle codeigniter url orm routes textview uiwebview vue代码规范 小程序demo源码 jq获取元素 最新更新国内最快的dns js空格符 字符串中包含某个字符串 js教程文档 git下载项目 flutter优缺点 python基础语法 python中items python基础教程 javaobject java文件流 java开发接口 java语言介绍 java中continue java开发语言 java截取 liunx命令大全 linux教学 redis入门指南 小米5c拆机 联发科p70 神剪辑教程 战斗的召唤 朋友圈访客记录教程 工信部手机入网查询 苹果放大镜 英雄联盟设置
当前位置: 首页 > 学习教程  > 编程语言

深入理解transition

2020/12/28 20:16:55 文章标签:

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” 1.语法 transition &#xff1a…

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

1.语法

transition :    transition-property transition-duration transition-timing-function transition-delay

它的具体描述如下:

描述
transition-property过渡效果,默认值all
transition-duration过渡延续时间 ,transition效果需要指定多少秒或毫秒才能完成 ,默认值0s
transition-timing-function过渡函数,指定transition效果的转速曲线,默认值0s
transition-delay过渡延迟时间,定义transition效果开始的时候 ,默认值ease

注意
1.(浏览器支持问题):
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。
Safari 支持替代的 -webkit-transition-property 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 transition-property 属性。
2.(写法问题):
书写时,属性之间是空格,不是逗号。当需要添加多个样式的变换效果,添加的属性才由逗号分隔。
3.(可过渡元素)
如 width,height,top,right,bottom,left,opacity 等等。

2.1transition-property

其主要有以下几个值:
none(没有属性获得过渡效果);
all(所有属性都有过渡效果)这个也是其默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

2.2transition-duration

用于transition效果需要指定多少秒或毫秒才能完成。
该属性单位为s或者ms,值是时间。
注意:值不能为负值,且必须带单位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s;
        }
        .box1:hover{
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="box1">
    </div>
</body>
</html>

2.3transition-timing-function

用于指定transition效果的转速曲线,就是设置变化效果的快慢。

描述
ease逐渐变慢
linear匀速
ease-in加速
ease-out减速
ease-in-out加速后减速
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1,.box2,.box3{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s linear;
        }
        .box1:hover{
            width: 200px;
            transition: all 2s ease-in;
        }
        .box2:hover{
            width: 200px;
            transition: all 2s ease-in-out;
        }

        .box3:hover{
            width: 200px;
            transition: all 2s ease-out;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

2.4transition-delay

过渡延迟时间,定义transition效果从什么时候。
该属性单位为s或者ms,值是时间。
注意:值不能为负值,且必须带单位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ,.box1,.box2,.box3{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        .box:hover{
            width: 200px;
            transition: all 2s 0s linear;
        }
        .box1:hover{
            width: 200px;
            transition: all 2s 1s ease-in;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

本文链接: http://www.dtmao.cc/news_show_550455.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?