码迷,mamicode.com
首页 > Web开发 > 详细

css---8 过渡属性刨析

时间:2019-11-01 12:29:22      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:prope   end   没有   int   响应   因此   pointer   top   整数   

1.       transition-property

  默认值为 all,表示所有可被动画的属性都表现出过渡动

可以指定多个 property

属性值:
none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称 (可以指定多个)

                transition-property: width,height;
                transition-duration: 9s,1s;

 

2       transition-duration

属性以秒或毫秒为单位指定过渡动画所需的时间。
默认值为 0s ,表示不出现过渡动画。

可以指定多个时长,每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。两种情况下,属性列表都保持不变。

属性值
以毫秒或秒为单位的数值
<time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ,表示不会呈现过渡动画,属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s 1s,0s,1s)!

transition-property:width,background;
技术图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-property</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div { 
    width: 200px; 
    height: 200px; 
    margin: auto; 
    background: pink;
    transition-property:width,background;
    transition-duration:3s;
}
div:hover { 
    cursor: pointer; 
    width: 600px; 
    height: 600px;
    background: deeppink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transition
技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test{
                width: 200px;
                height: 200px;
                border-radius:50%;
                border:3px solid red;
                background: pink;
                text-align: center;
                font: 50px/200px "微软雅黑" ;
                
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                transition:3s;
                
            }
            html{
                height: 100%;
            }
            html body{
                  height: 60%;
                  border: 3px solid yellow;
                  margin-top: 100px;
                 
            }
            body:hover #test{
                
                width: 100px;
                height: 100px;
                font: 30px/100px "微软雅黑";
            }
            
        </style>
    </head>
    <body>
        <div id="test">
            主页
        </div>
    </body>
</html>
View Code

 

 

3    transition-delay

transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
默认值:0s

你可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。两种情况下,属性列表都保持不变

属性值
值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。

transition-delay:1s;
技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test{
                width: 200px;
                height: 200px;
            
                border:3px solid red;
                background: pink;
                text-align: center;
                font: 50px/200px "微软雅黑" ;
                
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                transition-property: width,height;
                transition-duration: 9s,1s;
                 transition-delay:1s;
                
            }
            html{
                height: 100%;
            }
            html body{
                  height: 60%;
                  border: 3px solid yellow;
                  margin-top: 100px;
                 
            }
            body:hover #test{
                
                width: 100px;
                height: 100px;
                font: 30px/100px "微软雅黑";
            }
            
        </style>
    </head>
    <body>
        <div id="test">
            主页
        </div>
    </body>
</html>
transition-delay

 

4   transition-timing-function:过这个函数会建立一条加速度曲线,因此在整个transition变化过程中,变化速度可以不断改变

默认值:ease

1、ease:(加速然后减速)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier: 贝塞尔曲线
7、step-start:等同于steps(1,start)
step-end:等同于steps(1,end)
steps(<integer>,[,[start|end]]?)
第一个参数:必须为正整数,指定函数的步数
第二个参数:指定每一步的值发生变化的时间点(默认值end)

 transition-timing-function: inherit;
技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test{
                width: 200px;
                height: 200px;
            
                border:3px solid red;
                background: pink;
                text-align: center;
                font: 50px/200px "微软雅黑" ;
                
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                transition-property: width,height;
                transition-duration: 9s,1s;
                 transition-timing-function: inherit;
                
            }
            html{
                height: 100%;
            }
            html body{
                  height: 60%;
                  border: 3px solid yellow;
                  margin-top: 100px;
                 
            }
            body:hover #test{
                
                width: 100px;
                height: 100px;
                font: 30px/100px "微软雅黑";
            }
            
        </style>
    </head>
    <body>
        <div id="test">
        
        </div>
    </body>
</html>
View Code

 

属性值列表长度不一致时:

超出的情况下是会被全部截掉的
不够的时候,关于时间的会重复列表,transition-timing-function的时候使用的是默认值ease

    检测过渡是否完成:

当过渡完成时触发一个事件,在符合标准的浏览器下,这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
(每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件)

在transition完成前设置 display: none,事件同样不会被触发

 

 

 

 

支持属性                  https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

 

css---8 过渡属性刨析

标签:prope   end   没有   int   响应   因此   pointer   top   整数   

原文地址:https://www.cnblogs.com/hack-ing/p/11776273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!