简单使用CSS3-动画系列标签

如何使用CSS3-动画系列标签

1、过渡(CSS3)

语法格式：

transition: 要过渡的属性(transition-property)  花费时间(transition-duration)  运动曲线(transition-timing-function)  何时开始(transition-delay);
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

如果想要所有的属性都变化过渡， 写一个all 就可以

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

例子：

 <style>
        .box {
    
            margin: 200px auto;
            width: 150px;
            height: 150px;
            background-color: crimson;
            transition: all .8s ease 2s;
            /* transition: all .8s cubic-bezier(0.5 0.3 0.8 1.1) 2s; */
        }
        .box:hover {
    
            width: 300px;
            height: 300px;
            border-radius: 50%;
            box-shadow: -5px -5px 3px gold;
            background-color: red;
        }
 </style>
<div class&