学习animation、transition、transform和@keyframes的使用

当我们需要给页面添加动画效果时，需要用到CSS3的animation样式属性；

例如：

animation: test 2s infinite; 

其中test是动画的名称，2s是动画的时长，infinite是动画重复进行播放。

那么这个test动画要怎么设置呢？接下来我们要用到@keyframes规则；

例如：

@keyframes test{
    0% {transform:rotate(0deg); left:0px;}
    50% {transform:rotate(30deg); left:0px;}
    100% {transform:rotate(80deg); left:0px;}
}

其中0%表示动画的开始，100%表示动画的结束，后面{}中写入动画需要执行的样式属性；

那么50%表示动画运行到一半时需要执行的样式属性，您也可以增加一些百分比，例如：25%的时候需要执行的样式。

华丽的分割线

当我们需要给页面添加过渡效果时，需要用到CSS3的transition样式属性；

例如：

transition:all 2s ease 2s;

其中all表示所有属性都将获得过渡效果，2s表示过渡效果持续2秒钟时间，ease表示切换效果的速度，2s表示等待2秒后开始切换效果。

华丽的分割线

 当我们需要给HTML元素添加2D或3D转换时，需要用到CSS3的transform的样式属性；

例如：

transform:rotate(180deg);

其中rotate表示进行2D旋转，180deg表示旋转180度。

转载于:https://www.cnblogs.com/hool/p/10775659.html