使用Css实现Html动画及其相关属性

一、Html动画种类

        1.过渡动画

                CSS 声明提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。比如，在鼠标移动到按钮上时改变其背景颜色，能够使用户产生更强的交互感，通常这个改变是立即生效的，如下左图所示

  

使用 CSS 过渡动画后该元素的颜色将按照一定的曲线速率从白色变化为蓝色。这个过程可以自定义，这个例子中使用的是（ease-in以慢速开始的过渡方式），右如图所示。

---

        2.关键帧动画

                过渡动画可以说是只有只有两帧，对一些更为复杂丰富的动画效果可以说是无能为力的，这种情况下可以使用帧动画，例如下面这个小三角的运动效果。

        

可以看出这个小三角的运动，不仅是简单的两个状态，所以只是简单使用两个帧的话，无法完美呈现出来。这里就使用到了关键帧动画

        3.过渡动画的使用及其相关属性

       

        

上面这个更简单的效果是怎么实现的呢,让我们先看语法

 transition: <property> <duration> <timing-function> <delay>;         四个值以空格隔开

              要改变的属性      动画持续时间     动画的速率变化     动画多久后生效(延迟)

        能看出来哈,这个过渡动画是个复合的属性,详细来说就是包含下面四个属性

        transition-property                                    transition-duration

        transition-timing-function                          transition-delay  ​

上面的效果实现源代码如下:

.box {
            width: 100px;
            height: 100px;
            background: pink;
            transition-property: all;
            transition-duration: 3s;
            /* transition-delay: 2s; */
        }
        
        .box:hover {
            transform: translate( 400px) rotate(360deg);
            border-radius: 50%;
            background: aqua;
        }

其中动画部分的代码也可以简写成

transition: all 3s linear 0s;

其中

        all意思是所有元素的改变都生效,这个位置还可以填写background、width等其他的html属性

        3s意思是动画生效时间为三秒，就是从开始变化到变化结束所用时间

        linear意思是匀速变化，这里还可以填写一些其他的时间变化函数例如：

                ease-in(表示开始缓慢)         ease-out(表示结束缓慢)

                更多函数和原理可详见Easing Functions Cheat Sheet

        0s意思是动画开始的延迟时间是0秒

        其中 延迟若为0s，函数变化若为匀速则可以省去不写，如下

transition: all 3s ;

---

 4.关键帧动画的使用及其相关属性

和过渡动画不同，帧动画需要先定义一个动画

来看语法

@keyframes 动画名称{
                    from(0%)|to(100%|百分数{
                        样式
                    }
                }

就只这样来写的上面的动画效果定义的动画

@keyframes move {
            0% {
                transform: translate(0px 0px);
            }
            25% {
              
                transform: translate(200px, 0);
            }
            50% {
                transform: translate(200px, 200px);
            }
            75% {
                transform: translate(0px, 200px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }

其中0%和100%可分别用from和to来代替

就像下面这样

from {
                transform: translate(0px 0px);
            }
to {
                transform: translate(0px, 0px);
            }

其中每个百分号后面的大括号中代表的就是一个帧的动画的样式，这里以位移举例，可以设置width，background，color等css属性。

定义好动画之后需要把动画进行应用，上面三角动画的应用如下

.mark {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 50px solid aqua;
            /* 指定要指定的关键帧动画(注意:哪个标签需要动画则添加在哪个标签中) */
            animation-name: move;
            /* 关键帧动画需要的时长 */
            animation-duration: 5s;
            /* 指定关键帧动画执行的次数  infinite 无限次数*/
            animation-iteration-count: infinite;
            /* 动画执行函数  */
            animation-timing-function: linear;
        }

下面分析语法

        元素选择器{

                animation-name：元素需要执行的动画名称

                animation-duration：关键帧动画需要的时长

                animation-iteration-count: 关键帧动画执行的次数

                animation-timing-function: 动画执行函数

                }

或者可以简写成

.mark {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 50px solid aqua;
            /* 指定要指定的关键帧动画(注意:哪个标签需要动画则添加在哪个标签中) */
            animation: move 5s infinite linear;
        }