动画是使元素从一种样式逐渐变化为另一种样式的效果。可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。0% 是动画的开始，100% 是动画的完成。

1、定义动画轨迹

@keyframes  动画名称{

    from{

动画初始状态

    }

    to{

动画结束状态

    }

}

//---兼容写法

@-moz-keyframes

@-webkit-keyframes

@-o-keyframes

/* 使用百分比可以实现动画连续执行*/

@keyframes 动画名 {

    0%{

      }

    50%{

    }

    100%{

    }

 }

2、调用动画

animation: name duration timing-function delay iteration-count direction;

animation-name动画名称

animation-duration完成动画所花费的时间

animation-timing-function规定动画的速度曲线。

inear匀速

ease低速/加快/变慢

ease-in低速开始

ease-out低速结束

ease-in-out低速开始和结束。

animation-delay动画开始之前的延迟。

animation-iteration-count动画应该播放的次数。

animation-direction是否应该轮流反向播放动画。

normal 正常播放

reverse 反向播放

alternate 奇数次正向，偶数次反向。

alternate-reverse 奇数次反向，偶数次正向

远近互联前端小华整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。