animation动画属性,相关应用

animation应用,以下是基础内容

html

<div class="content">内容</div>

css 

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
// 或者
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

.content{
    animation: animationName 0 ease 0 1 normal none running;
}

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

学好英语太重要了,先翻译一遍

动画: 动画-名 动画-持续时间 动画-时间控制函数 动画-延时 动画-重复次数 动画-方向 动画-填充方法 动画-播放状态;

animation-name	animation-duration	animation-timing-function	animation-delay	animation-iteration-count	animation-direction	animation-fill-mode	animation-play-state
动画-名	动画-持续时间	动画-时间控制函数	动画-延时	动画-重复次数	动画-方向	动画-填充方法	动画-播放状态
none:无动画	0无动画	ease:缓缓开始,加速,缓缓结束	0	1	normal:以正常的方式播放动画	none不改变动画的默认行为	running:播放
keyframe后紧跟的name，可以同时绑定多个动画，动画名称之间使用逗号进行分隔	1s:1秒	linear线性(匀速)		infinite:无限次	reverse:逆转	forwards:当动画播放完成后，保持动画最后一个关键帧	paused:暂停
		ease-in缓缓开始			alternate:正逆交替	backwards：在 animation-delay 所指定的时间段内，应用动画第一个关键帧
		ease-out缓缓结束			alternate-reverse:逆正交替	both:同时遵循 forwards 和 backwards 的规则
		ease-in-out缓缓开始,缓缓结束
		cubic-bezier(n, n, n, n)三次贝塞尔曲线,参数的取值范围为 0 到 1 之间的数值
黄框是默认值;后续再进行补充

应用示例

@keyframes move
	{
	    0%{
			background: url(../../static/images/home2.png) no-repeat left top;
			-webkit-background-clip: text;
		}
		100%{
			background: url(../../static/images/home2.png) no-repeat right bottom;
			-webkit-background-clip: text;
		}
	}
.piu{
		font-size: 180px;
		font-weight: bold;
		color: transparent;
		background: url(../../static/images/home2.png) no-repeat left top;
		animation: move 10s;
		animation-timing-function:linear;
		-webkit-background-clip: text;
	}

 

 

 

 

 

参考:CSS动画（animation）10分钟入门教程