CSS自学框架之动画

这一节,自学CSS动画。主要学习了淡入淡出、淡入缩放、缩放、移动、旋转动画效果。先看一下成果。

优雅的过渡动画,为你的页面添加另一份趣味! 在你的选择器里插入 animation 属性,并添加框架内置的 @keyframes 即可实现!

一、CSS代码

css/* 复制代码
		/* 旋转 */
		@keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
		@-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
		/*淡入淡出*/
		@keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
		@-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }		
		@keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }
		@-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }		
		@keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }
		@-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }		
		@keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }
		@-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }	
		@keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }
		@-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }		
		@keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
		@-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
		/*淡入缩放*/
		@keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }
		@-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }		
		@keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }
		@-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }		
		@keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }
		@-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }		
		@keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }
		@-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }		
		@keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }
		@-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }		
		@keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
		@-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
		/*移动动画*/
		@keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }
		@-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }		
		@keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
		@-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
在这里插入代码片

二、html

html 复制代码
<div class="mythBox mid">
		优雅的过渡动画,为你的页面添加另一份趣味!
		在你的选择器里插入 animation 属性,并添加框架内置的 @keyframes 即可实现!
		<br/>
		<br/>
		<button class="btn yellow" style="animation:rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite">旋转动画</button>
		<button class="btn yellow" style="animation: rotate 1s infinite">旋转</button>

		
		<br/>
		<br/>
		<hr/>
		<h1>淡入淡出</h1>
		<button class="btn green" style="animation: fade-in 1s infinite;animation-iteration-count: 1;">一般淡入</button>
		<button class="btn green" style="animation: fade-off 1s infinite">一般淡出</button>
		<button class="btn green" style="animation: fade-in-top 1s infinite">向上淡入</button>
		<button class="btn green" style="animation: fade-in-bottom 1s infinite">向下淡入</button>
		<button class="btn green" style="animation: fade-in-left 1s infinite">向左淡入</button>
		<button class="btn green" style="animation: fade-in-right 1s infinite">向右淡入</button>
		
		<br/>
		<br/>
		<hr/>
		<h1>缩放动画</h1>
		<button class="btn yellow" style="animation: fade-small-large 1s infinite">从小到大</button>
		<button class="btn yellow" style="animation: fade-large-small 1s infinite">从大到小</button>
		<button class="btn yellow" style="animation: fade-larger-small 1s infinite">从更大缩小</button>
		<button class="btn yellow" style="animation: fade-small-larger 1s infinite">从正常放大</button>
		<br/>
		<br/>
		<button class="btn yellow" style="animation: scale-small-large 1s infinite"">从小变大</button>
		<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button>
	
	  <hr/>
	  <h1>移动动画</h1>
	  <button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下运动</button>
	  <button class="btn yellow" style="animation: left-and-right alternate 1s infinite">左右运动</button>
	  	</div>	
类型 名称 行为
淡入淡出 fade-in 一般淡入
淡入淡出 fade-off 一般淡出
淡入淡出 fade-in-top 向上淡入
淡入淡出 fade-in-bottom 向下淡入
淡入淡出 fade-in-left 向左淡入
淡入淡出 fade-in-right 向右淡入
淡入缩放 fade-small-large 从大变小的淡入
淡入缩放 fade-large-small 从小变大的淡入
淡入缩放 fade-larger-small 从更大变小的淡入
淡入缩放 fade-small-larger 从小变更大的淡出
缩放 scale-small-large 从小变大
缩放 scale-small-large 从大变小
摆动 scale-small-large 上下摆动
摆动scale-small-large 左右摆动
旋转 rotate 旋转

三、完整代码

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* #2eb872  #a3de83  #feffe4  #fa4659  */
			html,body,dl,dt,dd,ol,ul,h1,h2,h3,h4,h5,h6,pre,code,form,p,fieldset,legend,figure 
			{
				margin: 0;padding: 0;
			}
			*,*:before,*:after {box-sizing: border-box}
			/*box-sizing: border-box就是将border和padding数值包含在width和height之内,这样的好处就是修改border和padding数值盒子的大小不变。*/
			:root {
				--red: #fa4659;
				--yellow: #ffb03a;
				--blue: #3498db;
				--green: #27a17e;
				--white: #ffffff;
				/* 容器 */
				--wrapper-width: 75em;
				--wrapper-padding: 1.25em;
				/* 边框 */
				--radius: .5em;
				--border-color: transparent;
				--border-width: 1px;
				--gray: #ccc;
				--padd: 2em;

				--primary: var(--blue);
				--secondly: var(--yellow);
				
				--gray: #ccc;
				--light-gray: #ddd;
				--lighter-gray: #eee;
				color: #353535;
				-webkit-text-size-adjust: 100%;
				-webkit-tap-highlight-color: transparent;
				font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
				/*正常分辨率	基础字体大小 16px*/
				line-height: 30px;
			}
            /*小于 500px 时(移动设备)基础字体大小14px*/
			@media screen and (max-width: 500px) {
				html.font-auto {
					font-size: 14px
				}
			}
			/*大于 1921px 时(2K 屏幕)基础字体大小18px*/
			@media screen and (min-width: 1921px) {
				html.font-auto {
					font-size: 18px
				}
			}

			/* 容器 */
			.mythBox {margin: 0 auto;padding: 0 var(--wrapper-padding);	max-width: var(--wrapper-width);}
			.mythBox.min {max-width: 50em;}
			.mythBox.mid {max-width: 65em;}
			.mythBox.max {max-width: 85em;}
			.mythBox.full {max-width: 100%;}
			.mythBox.thin {padding: 0 .75em;}
			.mythBox.thick {padding: 0 1.5em;}
			.mythBox.clear {padding-left: 0;padding-right: 0;}

			/* 浮动 */
			.float-none {float: none !important;}
			.float-left {float: left !important;}
			.float-right {float: right !important;}
			.clearfix:after {content: '';clear: both;display: block;}

			/* 背景颜色 */
			.bg-red {background-color: var(--red);}
			.bg-green {background-color: var(--green);}
			.bg-yellow {background-color: var(--yellow);}
			.bg-blue {background-color: var(--blue);}

			/* 文字有关 */
			.font-s {font-size: .875em;}
			/*小字体*/
			.font-m {font-size: 1.125em}
			/*正常字体*/
			.font-l {font-size: 1.25em}
			/*大字体*/
			.text-left {text-align: left !important;}
			/*左侧对齐*/
			.text-right {text-align: right !important;}
			/*右侧对齐*/
			.text-center {text-align: center !important;}
			/*居中对齐*/
			.text-justify {text-align: justify !important;}
			/*两端对齐*/
			.text-break {word-break: break-all !important;}
			.text-nowrap {white-space: nowrap !important;}
			.text-ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
			/* - 分割线 */
			hr {border: 0;margin: 1.5em 0;border-top: var(--border-width) var(--gray) solid;}

			/* 标题 */
			h1 {font-size: 2em;}
			h1,h2,h3,h4,h5,h6 {margin-bottom: 1rem;}
			h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p:last-child {
				margin-bottom: 0
			}
			p {line-height: 1.8;margin-bottom: .3em;}
			a {color: var(--primary);text-decoration: none;}
			a:hover {color: var(--secondly);}
			/*<em>呈现为被强调的文本。mark标签定义带有记号的文本。*/
			em,mark,kbd {font-size: .875em;padding: .25em .5em;border-radius: var(--radius);}
			abbr[title] {cursor: help;text-decoration: none;border-bottom: 1px dotted;}

			/*提示功能*/
			kbd {color: #fff;background: #333;font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";	}

			/*在文档中格式化文本:*/
			em {color: var(--white);font-style: normal;background-color: var(--primary);}
			em.red {color: var(--white);background: var(--red);}
			em.yellow {color: var(--white);background: var(--yellow);}
			em.blue {color: var(--white);background: var(--blue);}
			em.green {color: var(--white);background: var(--green);}

			/*引用 */
			blockquote {margin: 0 0 1em;line-height: 1.8;font-style: oblique;background: #f5fafd;padding: 1em 1em 1em 2em;border-left: 5px #3498db solid;}

			/* 文章 */
			article {letter-spacing: .03em;}
			article a {word-break: break-all;}
			article>* {margin-bottom: 1em}
			article>*:last-child {margin-bottom: 0}
			article h1,article h2,article h3 {font-size: 1.2em;}
			article h4,article h5,article h6 {font-size: 1.1em;}
			article ul,article ol,article dl {line-height: 1.8}
			/* 图片 */
			img {max-width: 100%;vertical-align: middle;}

			/*按钮*/
			button {margin: 0;outline: 0;}
			.btn {color: inherit;cursor: pointer;background: #fff;padding: .5em 1em;display: inline-block;border-radius: var(--radius);border: var(--border-width) solid var(--border-color);}
			.btn:hover {color: var(--red)}
			/*按钮颜色 */
			.btn.red {color: var(--white);background-color: var(--red);}
			.btn.yellow {color: var(--white);background-color: var(--yellow);}
			.btn.blue {color: var(--white);background-color: var(--blue);}
			.btn.green {color: var(--white);background-color: var(--green);}
			.btn.transparent {background-color: transparent;}
			/*禁用的按钮*/
			.btn[disabled] {opacity: .5;cursor: not-allowed;}
			/*按钮尺寸 */
			.btn.small {font-size: .5em;}
			.btn.middle,.btn.large {padding: .75em 1.5em}
			.btn.large {font-size: 1.2em;}
			/* 浮漂提示框 */
			[myth-tag] {position: relative;}
			[myth-tag]:before,[myth-tag]:after {z-index: 1;opacity: 0;position: absolute;pointer-events: none;transition: opacity .3s;}
			/* 小箭头 */
			[myth-tag]:before {width: 0;height: 0;content: '';border: .5rem solid var(--border-color);}
			[myth-tag~=top]:before {bottom: 100%;border-top-color: rgba(0, 0, 0, .7);}
			[myth-tag~=bottom]:before {top: 100%;border-bottom-color: rgba(0, 0, 0, .7);}
			[myth-tag~=top]:before,[myth-tag~=bottom]:before {left: 50%;transform: translateX(-50%);}
			[myth-tag=left]:before {right: 100%;border-left-color: rgba(0, 0, 0, .7);}
			[myth-tag=right]:before {left: 100%;border-right-color: rgba(0, 0, 0, .7);}
			[myth-tag=left]:before,[myth-tag=right]:before {top: 50%;transform: translateY(-50%);}
			/*文字 */
			[myth-tag~=top]:after {bottom: 100%;margin-bottom: 1rem;}
			[myth-tag~=bottom]:after {top: 100%;margin-top: 1rem;}
			[myth-tag=top]:after,[myth-tag=bottom]:after {left: 50%;transform: translateX(-50%);}
			[myth-tag=left]:after {right: 100%;margin-right: 1rem;}
			[myth-tag=right]:after {left: 100%;margin-left: 1rem;}
			[myth-tag=left]:after,[myth-tag=right]:after {top: 50%;transform: translateY(-50%);}
			/* -- 组合对齐方式 */
			[myth-tag~=left][myth-tag~=top]:after,[myth-tag~=left][myth-tag~=bottom]:after {right: 0;min-width: 4em;}
			[myth-tag~=right][myth-tag~=top]:after,[myth-tag~=right][myth-tag~=bottom]:after {left: 0;min-width: 4em;}
			[myth-text]:hover:before,[myth-text]:hover:after {opacity: 1}
			[myth-text]:after {color: #fff;font-size: .85rem;white-space: nowrap;border-radius: .5rem;padding: .25rem .5rem;content: attr(myth-text);background: rgba(0, 0, 0, .7);}

			/* 栅格 */
			/* row-gap 的属性指定的行之间的间隙大小 */
			.row {display: flex;flex-wrap: wrap;row-gap: .3em;margin: 0 2em}
			.col-12 {flex: 0 0 100%;}
			.col-6 {flex: 0 0 50%;}
			.col-4 {flex: 0 0 33.3333%}
			.col-3 {flex: 0 0 25%;}
			.col-2 {flex: 1;}	
			
			.BetweenList{display: flex;flex-wrap: wrap;}
			.BetweenList.col2 .item{width:49.5%;background-color: #333;height: 50px;margin-bottom: 5px;}
			.BetweenList.col2 .item:not(:nth-child(2n)) {margin-right: calc(1% / 1);}
			.BetweenList.col3 .item{width:33%;background-color: #333;height: 50px;margin-bottom: 5px;}
			.BetweenList.col3 .item:not(:nth-child(3n)) {margin-right: calc(1% / 2);}
			.BetweenList.col4 .item{width:24%;background-color: #333;height: 50px;margin-bottom: 5px;}
			.BetweenList.col4 .item:not(:nth-child(4n)) {margin-right: calc(4% / 3);}
			.BetweenList.col5 .item{width:19%;background-color: #333;height: 50px;margin-bottom: 5px;}
			.BetweenList.col5 .item:not(:nth-child(5n)) {margin-right: calc(5% / 4);}
	      
		ul,ol{margin-left: 1.25em;}  
		/* - 表格 */
		.myth-table{
		    width: 100%;
		    overflow-x: auto;
		    overflow-y: hidden;
		    border-radius: var(--radius);
		}
		table{
		    border: 0;
		    width: 100%;
		    max-width: 100%;
		    caption-side: bottom;
		    border-collapse: collapse;
		}
		
		th:not([align]){
		    text-align: inherit;
		    text-align: -webkit-match-parent;
		}
		
		th, td{ padding: .75em }
		
		table thead tr{
		    border-bottom: min(2px, calc(var(--border-width) * 2)) solid var(--gray);
		    border-bottom-color: var(--gray);
		}
		table tbody tr{
		    border-bottom: var(--border-width) solid var(--gray);
		    transition: border-color .3s, background-color .3s;
		}
		table tbody tr:last-child{ border-bottom: 0 }		
		table tbody tr:hover{ background-color: var(--gray) }		
		/* - 蓝色风格 */
		table.fill thead{
		    background-color: var(--primary);
		    border-bottom: none;
		}
		table.fill thead tr{
		    border-bottom: none;
		}
		table.fill thead th, table.fill thead td{
		    color: #fff;
		}
		
		table.fill tbody tr{
		    border-bottom: none;
		}
		
		table.fill tbody tr:nth-child(even) th, table.fill tbody tr:nth-child(even){
		    background-color: #f7f7f7;
		}
		
		/*表单*/
		fieldset{
		    border: none;
		    margin-bottom: 2em;
		}
		fieldset > *{ margin-bottom: 1em }
		fieldset:last-child{ margin-bottom: 0 }
		fieldset legend{ margin: 0 0 1em }/* legend标签是CSS中用于定义各种列表样式的重要标签之一 */
		fieldset input:not([type="checkbox"]):not([type="radio"]), fieldset select, fieldset textarea{ width: 100% }
		fieldset label{display: block; user-select: none;}
		fieldset label > span:first-child{opacity: .6;white-space: nowrap;margin-bottom: .5rem;display: inline-block;}
		/* :required 选择器在表单元素是必填项时设置指定样式。 */
		fieldset label.required > span:first-child:after{color: red;content: "*";margin-left: .25em;}
		input[disabled], textarea[disabled]{cursor: no-drop !important;}
		
		input, select, textarea{margin: 0;outline: none;font: inherit;max-width: 100%;background: none;vertical-align: middle;}
		input[disabled], textarea[disabled]{cursor: no-drop !important;}
		input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"],select, textarea{padding: .5em;color: inherit;border-radius: var(--radius);border: var(--border-width) var(--gray) solid;}input.invalid, input:out-of-range{border-color: #c40b00;background: rgba(255, 0, 0, .1);}
		/* 文件选择 */
		input[type="file"]:not([hidden]){display: flex;align-items: center;}			
		input[type="file"]::-webkit-file-upload-button{color: #fff;border: none;outline: none;padding: .5em 1em;font-size: inherit;margin-right: .5em;display: inline-block;border-radius: var(--radius);background-color: var(--primary);}
		/* 颜色选择器 */
		input[type="color"]{width: 3em !important;height: 3em !important;border: none;padding: 0;}
		input[type="color"]::-webkit-color-swatch-wrapper{padding: 0;}
		input[type="color"]::-moz-color-swatch{border: none;}
		input[type="color"]::-webkit-color-swatch{border: none;border-radius: var(--radius);}
		/* 滑动条 */
		input[type="range"]{margin: 0;height: 100%;-webkit-appearance: none;-moz-appearance: none;cursor: ew-resize;cursor: grab;overflow: hidden;min-height: 1.5rem;}			
		input[type="range"]:focus{outline: none;box-shadow: none;}			
		input[type="range"]:active::-webkit-slider-thumb{border-color: var(--primary);background-color: var(--primary);}
		input[type="range"]:active::-moz-range-thumb{border-color: var(--primary);background-color: var(--primary);}		
		input[type="range"]:focus::-ms-thumb{border-color: var(--primary); background-color: var(--primary);}			
		input[type="range"]::-moz-focus-outer{ border: 0 }
		input[type="range"]::-webkit-slider-runnable-track{content: '';height: calc(var(--border-width) * 2);pointer-events: none;background-color: var(--primary);}			
		input[type="range"]::-webkit-slider-thumb{width: 1em;height: 1em;-webkit-appearance: none;appearance: none;background: #fff;border-radius: 5em;margin-top: calc(-.5em + var(--border-width));border: var(--border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;}			
		input[type="range"]::-moz-range-track{height: 2px;background: rgba(0, 50, 126, .12);}			
		input[type="range"]::-moz-range-thumb{width: 1em;height: 1em;background: #fff;border-radius: 5em;margin-top: calc(-.5em + var(--border-width));border: var(--border-width) solid rgba(0, 0, 0, .15);transition: .3s border-color, .3s background-color;}		
		input[type="range"]::-moz-range-progress{border: 0;height: 2px;margin-top: 0;background-color: var(--primary);}				/* 进度条 */
		progress{overflow: auto;border-radius: 50px;}			
		progress::-webkit-progress-bar{background-color: #eee;}
		/* 多选框 */
		input[type="checkbox"], input[type="radio"]{float: left;width: 1.5em;height: 1.5em;cursor: pointer;position: relative;margin: 0 .5em 0 0;-moz-appearance: none;-webkit-appearance: none;}			
		input[type="checkbox"]:before, input[type="radio"]:before{content: '';width: 100%;height: 100%;display: block;box-shadow: 0 0 0 var(--border-width) var(--gray) inset;transition: background-color .3s, box-shadow .3s;}			
		input[type="checkbox"]:after{top: 10%;left: 10%;width: 30%; height: 60%;content: '';position: absolute;transition: transform .3s;transform-origin: 100% 100%;border-right: .15em solid #fff;border-bottom: .15em solid #fff;transform: rotate(45deg) scale(0);}
		input[type="radio"], input[type="radio"]:before{ border-radius: 100% }
		input[type="checkbox"], input[type="checkbox"]:before{ border-radius: .2em }			
		input[type="radio"]:checked:before{background-color: var(--primary);border: var(--border-width) solid var(--primary);box-shadow: 0 0 0 .2em #fff inset;}			
		input[type="checkbox"]:checked:before{box-shadow: none;background-color: var(--primary);}			
		input[type="checkbox"]:checked:after{transform: rotate(45deg) scale(1);}
		/* -- 开关按钮 */
		input[type="checkbox"].switch{width: 4em;height: 2em;float: none;cursor: pointer;position: relative;box-sizing: content-box;border-radius: calc(var(--radius) * 10);border: var(--border-width) solid var(--gray);background-color: var(--lighter-gray);transition: border .3s, background-color .3s;}			
		input[type="checkbox"].switch:before{margin: 0;border: 0;width: 2em;height: 2em;content: '';display: block;box-shadow: none;background: #fff;position: absolute;transition: transform .3s;border-radius: calc(var(--radius) * 10);}			
		input[type="checkbox"].switch:after{ content: normal }			
		input[type="checkbox"].switch:checked{box-shadow: none;border-color: var(--primary);background-color: var(--primary);}
		input.switch:checked:before{background: #fff;transform: translateX(2em);}
		/* 一行表单 */
		form .inline label, fieldset.inline label{display: inline-block;vertical-align: bottom;margin: 0 .75em .75em 0;}
		/* 动画 */
		/* 旋转 */
		@keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
		@-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
		/*淡入淡出*/
		@keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
		@-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }		
		@keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }
		@-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }		
		@keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }
		@-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }		
		@keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }
		@-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }	
		@keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }
		@-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }		
		@keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
		@-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
		/*淡入缩放*/
		@keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }
		@-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }		
		@keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }
		@-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }		
		@keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }
		@-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }		
		@keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }
		@-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }		
		@keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }
		@-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }		
		@keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
		@-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
		/*移动动画*/
		@keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }
		@-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }		
		@keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
		@-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
		
		</style>
	 <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
	</head>
	<body>
    <div class="mythBox mid">
		优雅的过渡动画,为你的页面添加另一份趣味!
		在你的选择器里插入 animation 属性,并添加框架内置的 @keyframes 即可实现!
		<br/>
		<br/>
		<button class="btn yellow" style="animation:rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite">旋转动画</button>
		<button class="btn yellow" style="animation: rotate 1s infinite">旋转</button>

		
		<br/>
		<br/>
		<hr/>
		<h1>淡入淡出</h1>
		<button class="btn green" style="animation: fade-in 1s infinite;animation-iteration-count: 1;">一般淡入</button>
		<button class="btn green" style="animation: fade-off 1s infinite">一般淡出</button>
		<button class="btn green" style="animation: fade-in-top 1s infinite">向上淡入</button>
		<button class="btn green" style="animation: fade-in-bottom 1s infinite">向下淡入</button>
		<button class="btn green" style="animation: fade-in-left 1s infinite">向左淡入</button>
		<button class="btn green" style="animation: fade-in-right 1s infinite">向右淡入</button>
		
		<br/>
		<br/>
		<hr/>
		<h1>缩放动画</h1>
		<button class="btn yellow" style="animation: fade-small-large 1s infinite">从小到大</button>
		<button class="btn yellow" style="animation: fade-large-small 1s infinite">从大到小</button>
		<button class="btn yellow" style="animation: fade-larger-small 1s infinite">从更大缩小</button>
		<button class="btn yellow" style="animation: fade-small-larger 1s infinite">从正常放大</button>
		<br/>
		<br/>
		<button class="btn yellow" style="animation: scale-small-large 1s infinite"">从小变大</button>
		<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button>
	
	  <hr/>
	  <h1>移动动画</h1>
	  <button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下运动</button>
	  <button class="btn yellow" style="animation: left-and-right alternate 1s infinite">左右运动</button>
	  	</div>	

	</body>
	</body>
</html>
相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端