css过度效果

语法

transition:[,]*
= [ none | ] || || ||
默认值:看每个独立属性
适用于:所有元素,包含伪对象:after和:before
继承性:无
动画性:否
计算值:看每个独立属性
媒体:交互

取值

<’ transition-property ‘>:
检索或设置对象中的参与过渡的属性
<’ transition-duration ‘>:
检索或设置对象过渡的持续时间
<’ transition-timing-function ‘>:
检索或设置对象中过渡的动画类型
<’ transition-delay ‘>:
检索或设置对象延迟过渡的时间

缩写方式

transition:
        border-color .5s ease-in .1s,
        background-color .5s ease-in .1s,
        color .5s ease-in .1s;

拆分方式

transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;

案例演示


<html>
    <head>
        <title>test transtiontitle>
        <style>
          ul{list-style: none;list-style-position: horizontal;}
          ul li{width:100px;height:50px;float:left;background-color:#eee;padding:10px;margin-left:10px;
                -webkit-transition:background-color .5s ease-in;
                -moz-transition:background-color .5s ease-in;
                transition:background-color .5s ease-in;
          }
          ul li:nth-child(1):hover{background-color:red;}
          ul li:nth-child(2):hover{background-color:green;}
          ul li:nth-child(3):hover{background-color:#90FF90;}
          ul li:nth-child(4):hover{background-color:#2DA2C9;}
        style>
    head>
    <body>
        <ul>
            <li>box1li>
            <li>box2li>
            <li>box3li>
            <li>box4li>
        ul>
    body>
html>

transition-property 定义参与过渡效果的元素

取值

none:
不指定过渡的css属性
all:所有可以进行过渡的css属性
:指定要进行过渡的css属性

有过渡效果的属性

属性名称 类型
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

你可能感兴趣的:(CSS)