HTML5 CSS3动画（animation）特性简写语法速查表

Shorthand Animation Cheat Sheet，animation特性速写语法速查。

css3, animation, tool

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1521
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

$bg-hover: #00C853;
$c-property: #9A8297;
$c-attribute: #DDCA7E;
$c-heading: #f2f2f2;
$bg: #222;

body {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items: center;
	height:100vh;
	background:$bg;
}

.title {
	font-family:sans-serif;
	h1 {
		font-size:3em;
		line-height:1.5em;
		color: $c-heading;
	}
	p {
		color: $c-heading;
		a {
			padding:0 10px;
			color: darken($c-heading, 30%);
			text-decoration: none;
			&:hover {
				color: darken($c-heading, 10%);
			}
		}
	}
}

.content {
	width:90%;
	max-width:1000px;
	margin:10px 0;
	#property, #play-state {
		color: $c-property;
		&:hover {
			color: lighten($c-property, 15%);
		}
	}
	#name, #duration, #timing-function, #delay, #iteration-count, #direction, #fill-mode, #other {
		color: $c-attribute;
		&:hover {
			color: lighten($c-attribute, 10%);
		}
	}
	#bracket, #semicolon { color: #fff; }
	#keyframe { color:#809BBD; }
	&-item {
		display:inline-block;
		margin:5px 0 0 0;
		padding:4px 2px 2px 2px;
		
		font-family: monospace;
		font-size:1.5em;
		border-radius:3px;
		//transition:all 200ms ease-in-out;
		&-desc {
			opacity: 0;
			position:absolute;
			max-width:200px;
			height:100px;
			transform:translateY(-55px) scale(0);
			
			font-size:1rem;
			background: $bg-hover;
			border-radius:5px 5px 5px 2px;
			transition: opacity .75s, transform .5s;
			
			h1 {
				padding:3px 0;
				background: lighten($bg-hover, 15%);
				border-radius:5px 5px 0 0;
				text-align:center;
				color:lighten($c-heading, 15%);
			}
			p {
				padding:5px 5px 3px 5px;
				color:darken($c-heading,0%);
			}
			&_carrot {
				width:15px; height: 15px;
				margin:0 3px;
				background: $bg-hover;
				transform: translateY(-3px) rotate(45deg);
			}
			
			&:hover {
				opacity:1;
			}
		}
		a {
			color: inherit;
			text-decoration:none;
		}
		&:hover {
			background: lighten($bg, 10%);
		}
	}
}

.content-item-desc_hide {
	opacity: 1;
	transform: translateY(-110px) scale(1);
}

.indent {
	margin:0 0 0 40px;
}

HTML

<div class="title content">
    <h1>Animation Shorthand Cheat Sheet</h1>
    <p>Resources:
        <a href="https://timblin.co/shorthand-animation-cheat-sheet/" target="_blank">Self Hosted Version</a>|<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" target="_blank">Mozilla</a>|<a href="https://tympanus.net/codrops/css_reference/animation/"
        target="_blank">Codrops</a>|<a href="https://css-tricks.com/almanac/properties/a/animation/" target="_blank">CSS Tricks</a>
    </p>
</div>

<div class="content">
    <div class="content-item" id="property">
        <div class="content-item-desc">
            <h1>Property</h1>
            <p>The shorthand property to set all longhand animation properties.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation/" target="_blank">animation:</a>
    </div>
    <div class="content-item" id="name">

<div class="content-item-desc">
            <h1>Name</h1>
            <p>Specify the name of the animation defined by @keyframes rules.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-name" target="_blank">[animation-name]</a>

</div>
    <div class="content-item" id="duration">

<div class="content-item-desc">
            <h1>Duration</h1>
            <p>Specify how long the animation should take in 's' or 'ms'.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-duration" target="_blank">[animation-duration]</a>

</div>
    <div class="content-item" id="timing-function">

<div class="content-item-desc">
            <h1>Timing Function</h1>
            <p>Defines speed of an animation over time. ie: linear, ease-in-out.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-timing-function" target="_blank">[animation-timing-function]</a>

</div>
    <div class="content-item" id="delay">

<div class="content-item-desc">
            <h1>Delay</h1>
            <p>Defines when the animation will start after being applied.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-delay/" target="_blank">[animation-delay]</a>

</div>
    <div class="content-item" id="iteration-count">

<div class="content-item-desc">
            <h1>Iteration Count</h1>
            <p>The number of times the animation will loop. (1,..., infinite)
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-iteration-count" target="_blank">[animation-iteration-count]</a>

</div>
    <div class="content-item" id="direction">

<div class="content-item-desc">
            <h1>Direction</h1>
            <p>Animation direction: normal, reverse, alternate, alternate-reverse
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-direction" target="_blank">[animation-direction]</a>

</div>
    <div class="content-item" id="fill-mode">

<div class="content-item-desc">
            <h1>Name</h1>
            <p>Where the animation leaves off: none, forwards, backwards, both.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-fill-mode" target="_blank">[animation-fill-mode]</a>

</div>
    <div class="content-item" id="semicolon">
        ;
    </div>
</div>

<div class="content-item-desc">
            <h1>Play State</h1>
            <p>Specify wether the animation is running or paused. (No Shorthand)
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-play-state/" target="_blank">animation-play-state:</a>

</div>
    <div class="content-item" id="other">

<div class="content-item-desc">
            <h1>Play States</h1>
            <p>Defaults to running, and pauses the animation in place when set.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        <a href="https://tympanus.net/codrops/css_reference/animation-play-state/" target="_blank">running | paused</a>

</div>
    <div class="content-item" id="semicolon">
        ;
    </div>
</div>

<div class="content">
    <div class="content-item" id="keyframe">
        <div class="content-item-desc">
            <h1>@keyframes</h1>
            <p>A CSS rule used to define a particular animation over time.
            </p>
            <div class="content-item-desc_carrot"></div>
        </div>
        @keyframes
    </div>
    <div class="content-item" id="name">
        <div class="content-item-desc">
            <h1>Name</h1>
            <p>Used to declare which animation you are referencing in 'animation:'.
            </p>
        </div>
        <a href="" target="_blank">[animation-name]</a>
    </div>
    <div class="content-item" id="bracket">
        {
    </div>
    </br>
    <div class="content-item indent" id="timing-function">
        <a href="" target="_blank" class="replaceMeFrom">from</a>
    </div>
    <div class="content-item" id="bracket">
        {
    </div>
    </br>
    </br>
    <div class="content-item indent" id="bracket">
        }
    </div>
    </br>
    <div class="content-item indent" id="fill-mode">
        <a href="" target="_blank" class="replaceMeTo">to</a>
    </div>
    <div class="content-item" id="bracket">
        {
    </div>
    </br>
    </br>
    <div class="content-item indent" id="bracket">
        }
    </div>
    </br>
    <div class="content-item" id="bracket">
        }
    </div>
</div>

Shorthand Animation Cheat Sheet，animation特性速写语法速查。

css3, animation, tool

编辑器支持Emmet

快捷键

Shorthand Animation Cheat Sheet，animation特性速写语法速查。

css3, animation, tool

使用H5动画演示CSS3变换原点（transform-origin）工作原理

HTML5 CSS3印章（盖章）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：