css3 transition属性讲解

transition 主要是用于一个元素的一种状态到另一种状态的过渡过程,主能主动触发,必须依赖于事件,例如 hover 伪类选择器。借助这种过渡,我们可以实现一些常用的简单动画,如颜色转变、位置移动等等……

transition 语法

transition:[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]

这是一个复合属性,是由 transition-property、transition-duration、transition-timing-function、transition-delay 四个属性组合而成,当然也可以用这个4个属性分别来写。

transition-property:用来过滤的CSS属性,如 width、height、left、right、color等等

transition-duration:用来过滤的时间,单位是秒或毫秒,如 1s、0.5s等等

transition-timing-function:规定速度效果的速度曲线,值为linear(恒速)、ease(由快到慢到更慢)、ease-in(越来越快)、ease-out(越来越慢)、ease-in-out(先加速后减速)。

transition-delay:用来过滤前的延迟时间,单位是秒或毫秒,如 1s、0.5s等等

另外说明一点,如果要有多个属性过滤,需要用“,”分隔,如

div { transition: width 2s, color 1s }


transition 兼容性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 属性。

Safari 支持替代的 -webkit-transition-timing-function 属性。

注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition-timing-function 属性。


transition 实例

1、做一个简单的动画,默认是一个小圆点,当鼠标放上去之后,圆点的颜色和大小发生变化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { margin: 0; padding: 0; text-align: center; }
div { 
    width: 10px; height: 10px; background-color: #f00; border-radius: 50%; margin: 30% 0 0 300px;
    transition: width 1s linear, height 1s linear, background-color 0.5s linear;
}

div:hover {
    width: 30px; height: 30px; background-color: #00f;
}
</style>
</head>

<body>
    <div></div>
</body>
</html>

将上面的代码保存到 1.html 文件中并在 chrome 浏览器中运行,当鼠标放到小圆点上时,会慢慢变大、颜色也慢慢过渡


2、做一个抛物线,这个在购物车页面经常用到

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { margin: 0; padding: 0; text-align: center; }
div { 
    width: 20px; height: 20px; background-color: #f00; border-radius: 50%;
    position: absolute; top: 50px; left: 500px; cursor: pointer;
    transition: left 1s linear, top 1s ease-in;
}

</style>
</head>

<body>
    <div></div>

    <script type="text/javascript">
    document.getElementsByTagName("div")[0].onclick = function()
    {
        this.style.left = 0;
        this.style.top = (window.innerHeight - 50) + "px";
        console.log(window.innerHeight)
    };
    </script>
</body>
</html>

将上面的代码保存到 2.html 文件中并在 chrome 浏览器中运行,当鼠标点击红色小点时,小点会执行抛物线运动

未经允许不得转载:易读小屋  »  css3 transition属性讲解