当我们需要给页面添加动画效果时,需要用到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度。