css3之动画

        今天学习的动画，用动画就可以设计出很多好看的效果，例如用css动画实现一个钟表的效果，鼠标悬停上去，指针开始移动；

       .clock {
            width: 284px;
            height: 284px;
            border-radius: 50%;
            background: url(img/clock.png) no-repeat;
            position: relative;
        }
        
        .clock::before {
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .clock::after {
            content: "";
            width: 2px;
            height: 30%;
            background: black;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            transition-duration: 60s;
            transition-timing-function: steps(60, start);
            transform-origin: bottom;
        }
        
        .clock:hover::after {
            transform: translateX(-50%) rotate(360deg);
        }

 

<div class="clock">

    </div>

这就是使用css动画实现的，先给这个盒子设置一个大小并用border-radius设置成圆，在里面插入背景图，让这个背景图不平铺，并给他一个相对定位，然后利用伪元素画一个圆，并且让他居中，在利用after这个伪元素来设置指针，需要注意的是要给动画设置时间，他才可以运行，设置时间用的是transition-duration,transition-timing-function是设置规定动画过渡效果的速度曲线，里面有：ease：规定过渡效果，先缓慢的开始，然后加速，然后缓慢的结束这个值就是速度曲线的默认值，linear：规定从开始到结束具有相同速度的过渡效果，ease-in规定缓慢开始的过渡效果；ease-out：规定缓慢结束的过渡效果，ease-in-out：规定开始和结束较慢的过渡效果，如果这几个属性你都不想用，那么你也可以自己定义自己的值,使用cubic-bezier(n,n,n,n)：允许你在三次贝塞尔函数中定义自己的值。

动画

        如何使用动画呢？

        需要先给动画定义一个样式和名字，使用@keyframes 动画名称{ from{开始时的样式}to{结束时的样式} }，在这里面定义动画的样式，如果需要用动画，那么就要在要是有动画的地方写上animation-name：动画名称；也可以设置动画填充模式，使用animation-fill-mode:属性有（none：默认值，动画在执行之前或之后不会对元素应用任何样式；forwards：元素将保留由最后一个关键帧设置的样式值；backwards：元素将获取由第一个关键帧设置的样式值，并在动画延迟期间保留该值；both：动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性）。

animation-delay:这个是延迟动画，当值为负数时，表示已经跳过几秒进入动画周期。

反向或交替运行动画

animation-direction:属性有normal-动画正常播放，默认值；reverse-动画以反方向播放；alternte-动画先向前播放然后向后播放；alternate-reverse-动画先向后播放，然后向前。