CSS动画中的样式中的过渡属性

最新推荐文章于 2024-06-30 09:52:11 发布

Jsy_997

最新推荐文章于 2024-06-30 09:52:11 发布

阅读量3.7k

点赞数 1

分类专栏： htmlcss 文章标签： css3 html5

本文链接：https://blog.csdn.net/Jsy_997/article/details/124078044

版权

htmlcss 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1.什么是过渡属性？过渡属性的基本语法？

首先，过渡属性是一个不需要web前端使用js语言去编写程序，直接使用css样式就可以实现简单的动画效果。在该属性的加持下，可以让一些动画效果看起来更加顺滑。

其次，transition CSS属性其实是 transition-property ， transition-duration ，transition-timing-function 和 transition-delay 的一个简写属性。这四个属性分别表示过渡或动态模拟的CSS属性、完成过渡所需要的时间、完成动画所使用的的过渡函数、过度开始时出现的延迟时间。

基本语法为：transition ：[ transition-property ，transition-duration ，transition-timing-function ，transition-delay ] 简写时依次为这四个值。

2.transition-property

基本语法：transition-property：none | all | property；分别表示没有属性会获得过渡效果、全部属性都获得过渡效果、定义应用过渡属性的CSS属性名称列表，列表以逗号隔开。

下图就是相当于property，定义应用过度属性的css属性名称（宽度width）

3.transition-duration

transition-duration：time；该属性表示你的动画所需要的时间。

下图就是长度变换为200px所需要的2s的时间。

4.transition-timing-function

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)可以定义自己的值，可能的值在0-1之间。

5.transition-delay

transition-delay：time；表示动画开始时的延迟时间。

最后附上一个动画效果的小demo，有兴趣的可以自己试一下效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 120px auto;
            width: 200px;
            height: 200px;
            background: red;
            transition: all 2s linear 1s;
        }
        div:hover{
            background: yellow;
            transform: rotate(60deg) scale(2) translate(100px,200px);
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>