CSS3动画效果-3d-过渡动画

知识点一:旋转

新加的属性:transform: rotateZ(ndeg);

知识点二:过度动画

transform-style:preserve-3d;// 设置成3D的效果,,必加的东西
perspective: 800px-2000px; //设置成右侧边阴影的。。。。。

@keyframes name { 0% { transform: rotate(180deg); } 180% { transform: rotate(360deg); } 360% { trnsform: rotate(720deg); } }//结束到这 。。。结束

animation: name 20s; //过渡加在动画的元素上
或者是这种。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
animation-name: name;
animation-duration: 3s;//动画指定需要多少秒或毫秒完成
animation-timing-function: 设置动画将如何完成一个周期
animation-delay: 时间; //设置动画在启动前的延迟间隔。

 

posted @ 2020-08-21 22:09  橘雎  阅读(724)  评论(0编辑  收藏  举报