首页 > 代码库 > CSS3 常用属性（四）-- 过渡、动画

CSS3 常用属性（四）-- 过渡、动画

2024-09-14 19:19:02   220人阅读

      过渡--transition

      过渡这个属性的作用是当元素的样式发生变化时，使用动画的效果进行变化。有了过渡属性后，很多情况下，写一些简单效果，将不需要再借助 javascript 去计算。

      transition  过渡属性简写，可以设置四个值

      transition-property 过渡的CSS的名字，或是all

      transition-duration  从一个状态到另一个状态的的时间

      transition-timing-function 过渡效果的动画曲线，默认easy，linear是匀速，cubic-bezier（n，n，n，n）可以自定义动画曲线

      transition-delay  延时

　　下面是利用CSS3过渡制作的一个旋转方块，鼠标移入方块后等待1s，然后10s 内匀速旋转 3600deg。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div class="box"></div>
 9     <style>
10     .box{
11         width: 200px;
12         height: 200px;
13         background: red;
14         margin: 0 auto;
15         transition:all 10s linear 1s;
16     }
17     .box:hover{
18         transform: rotate(3600deg);
19     }
20     </style>
21 </body>
22 </html>

　　

　　

　　动画--animation

      过渡是当元素状态发生改变时，触发了过渡的动画效果，而动画属性，则是当页面打开时，就开始执行了，一直到执行结束或页面关闭。

      执行动画时，是需要先定义动画规则，有了规则，元素才可以按照预设规则执行动画效果。定义动画规则时，是使用 @keyframes 来设置。

      用法如下：

@keyframes animation_name{
    0%{
    width:200px;
    }
    100%{
    width:400px;
    }
}

　　以上代码的规则是表示，规则名字是animation_name，规则是某个元素的宽度从 200px 到400px 。

CSS3 常用属性（四）-- 过渡、动画


联系
我们