创建动画的步骤

@keyframes:创建动画(关键帧)
animation:在对应元素上使用动画

@keyframes规则

@keyframes animationname{
keyframes-selector{
css-style;
}
}

animationname为动画的名称
动画时长的百分比,值0-100%;form(与0%相同),to(与100%相同)

设置动画属性

语法:animation:name duration timing-function delay interation-count direction
animation-name:@keyframes动画名称
animation-duration:动画完成一个周期所花费的秒或毫秒,默认是0
animation-timing-function:动画的速度曲线,默认是ease
animation-delay:动画何时开始,默认是0
animation-interation-count:动画被播放的次数,默认是1,值为infinite表示无限播放
animation-direction:动画是否在下一周期逆向播放,默认是normal

<div id="com">
    <img src="img/hello.jpg">
</div>
#com{
		animation: meinv 5s 3;
	}
@keyframes meinv{
		0%{
			transform: rotate(60deg);
			transform: scale(0);
		}
		55%{
			transform: rotate(180deg);
		}
		100%{
			top:0;
			transform: rotate(360deg);
		}
	}
        👍赞 0
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...