css动画 animation

青旅半醒 2021-07-24 23:41 469阅读 0赞

通过关键帧来模拟动画,必须是块级元素才能产生动画
    onAnimationEnd监听帧动画结束
    
    	1、定义动画类型
    		法一:@keyframes 自定义名称{
    			0%/from{
    				css样式
    			}
    			n%{
    				css样式
    			}
    			100%/to{
    				css样式
    			}
    		}
    		若未设置0%或100%,会在对应的帧默认使用原始样式
    		
    		法二(适合只有两帧的平滑过渡,比如两张背景颜色的改变):
    		@keyframes 自定义名称{
    			{
    			from {top: 200px;}    //从距顶端200px的位置开始,到元素最初设置的位置
    			to {}
    			}
    
    	2、调用动画
    		(1)调用
    			animation-name:动画名1,动画名2;  相同属性后面会覆盖前面
    			
    		(2)定义每个动画时间:
    			animation-duration:ns,ns; 只写一个默认为所有动画都在ns内完成,写多个一一对应,超出从第一个开始匹配
    		
    		(3)定义填充模式
    			animation-fill-mode:forwards;  动画结束停在最后一帧,不还原
    			animation-fill-mode:backwards;  动画开始之前,一直使用第0帧
    			animation-fill-mode:both;  动画开始之前一直使用0帧,动画结束停在最后一帧 
    			
    		(4)定义动画次数
    			animation-iteration-count:n,n,n/infinite; 对应不同动画的次数
    				
    		(5)延迟动画
    			animation-delay:2s;  延迟2s后,动画开始
    			animation-delay:-2s; 从动画开始2s后的位置立即开始动画
    		
    		(6)动画方向
    			animation-direction:normal(0-100)/reverse(100-0)/alternate(0-100然后100-0,来回速度相同)/alternate-reverse(100-0然后0-100,来回速度相同)
    		
    		(7)设置动画方式
    			animation-timing-function:steps(n,start/end); 分n帧(n步),立即开始/过一帧再开始,完成动画
    				一帧(步)可简写成:step-start/step-end
    			
    			linear 	动画从头到尾的速度是相同的。 	测试
    			ease 	默认。动画以低速开始，然后加快，在结束前变慢。 	测试
    			ease-in 	动画以低速开始。 	测试
    			ease-out 	动画以低速结束。 	测试
    			ease-in-out 	动画以低速开始和结束。 	测试
    			cubic-bezier(n,n,n,n) 	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 	
    		
    		(8)设置动画状态:
    			animation-play-state:running/paused;  动画开始/暂停
    		
    		(9)简写:
    			animation:动画名 填充模式 运行时间 延迟时间 ...
    				延迟时间一定是在运行时间之后