C3动画

动画的分类及使用

CSS3中的动画分为:平移动画、过渡动画和自定义动画三种。

  • 平移动画:transform: 平移translate / 旋转rotate / 放大scale / 倾斜skew;

  • 过渡动画:transition:  transition是一个复合属性,包括:
    transition-property:过渡属性(即哪些元素使用过渡动画);
    transition-delay:过渡延时;
    transition-duration:过渡时间;
    transition-timing-function:过渡方式(linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认,以低速开始,然后加快,在结束前变慢。 )
    //注:如果写复合属性,参数顺序可以随便写,但是先写的时间一定是持续时间。

  • 自定义动画(帧动画):animation: 动画名称   时间   运动方式   是否循环;
    animation-name: zidingyi; 动画名称;
    animation-delay: 1s ; 动画延迟时间;
    animation-direction: alternate; 动画的播放方向(alternate表示第135次正向播放,246次反向播放);
    animation-duration: 3s; 动画的播放时间;
    animation-iteration-count: 1; 动画的播放次数 (如果其后的属性值为infinite,则表示自定义的动画一直循环播放;
    animation-play-state: running; 动画播放是否暂停;
    animation-timing-function: linear; 动画的播放方式;

    动画播放序列的声明:(两种写法)
    @keyframes[空格] [定义的动画名]{
    方式一:from{ }
                  to{ }
    使用“from”和“to”来代表一个动画是从哪开始,到哪结束。也就是说这个 “from"就相当于"0%”,而"to"相当于"100%"

    方式二:0%{ }
                 30%{ }
                 50%{ }
                 80%{ }
                 100%{ }

可以在这个规则中创建多个百分比,分别在每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动、改变元素颜色、位置、大小、形状等。数值段必须是百分数,如果不是百分数,这个keyframes是无效的,不会起任何作用。keyframes的单位只接受百分比值

}

  • 对同一样式的动画设置不同的延迟时间及动画时间,产生的最终效果可能不同;
  • transform和animation这两个属性不能同时使用,否则默认执行animation帧动画,transform属性无用,若要使用该属性,可以再给它包一个div,对这个div设置transform属性(不把两个属性用在同一元素下即可。);
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         body {
10             background-color: skyblue;
11         }
12         
13         div {
14             width: 200px;
15             height: 400px;
16             background-color: #fff;
17             border-left: 200px solid black;
18             margin: 100px auto;
19             border-radius: 50%;
20             animation: run-inner 2s infinite linear;
21         }
22         
23         div::before,
24         div::after {
25             content: "";
26             display: block;
27             width: 50px;
28             height: 50px;
29             border-radius: 50%;
30             margin-left: -100px;
31         }
32         
33         div::before {
34             background-color: #fff;
35             border: 75px solid black;
36         }
37         
38         div::after {
39             background-color: #000;
40             border: 75px solid #fff;
41         }
42         
43         @keyframes run-inner {
44             0% {
45                 transform: rotate(0deg);
46             }
47             50% {
48                 transform: rotate(-180deg);
49             }
50             100% {
51                 transform: rotate(-360deg);
52             }
53         }
54     </style>
55 
56 </head>
57 
58 <body>
59     <div></div>
60 </body>
61 
62 </html>
animation动画库

1、首先引入animate css文件

<link rel="stylesheet" href="animate.min.css">

2、给指定的元素加上指定的动画样式名

 
<div class="animated bounceOutLeft"></div>
 
这里包括两个class名,第一个是基本的,必须添加的样式名,任何想实现的元素都得添加这个。第二个是指定的动画样式名
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <link rel="stylesheet" href="./animate.css-main/animate.css">
 9     <style>
10         #box {
11             width: 200px;
12             height: 200px;
13             background-color: red;
14             margin: 200px 200px;
15         }
16         
17         #box {
18             animation: wobble 1s infinite;
19             /*想要改变值可以替换wobble*/
20         }
21     </style>
22 </head>
23 
24 <body>
25     <div id="box"></div>
26 </body>
27 
28 </html>

动画库转载于https://www.cnblogs.com/starof/p/4968769.html

上一篇:h5、c3面试题总汇


下一篇:C3-UVa10340-All in All