css动画和js动画_媒体查询之间CSS动画

css动画和js动画

CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during :hover, and we also create keyframe-based animations by adding a className, but did you know you can animate elements using media queries as the trigger? Let's have a look!

CSS动画就在那里切成薄片。 CSS动画之所以有效，是因为它们可以通过硬件加速，它们不需要JavaScript开销，并且由很少CSS代码组成。 我们经常在：hover期间通过CSS向元素添加CSS变换，并且还通过添加className来创建基于关键帧的动画，但是您知道您可以使用媒体查询作为触发器来为元素设置动画吗？ 我们来看一下！

View Demo 观看演示

CSS (The CSS)

The syntax for creating these animations and transitions is the same between media queries as it is between element states; the only difference is actually enacting them between the media queries:

在媒体查询之间和元素状态之间创建这些动画和过渡的语法相同。 唯一的区别实际上是在媒体查询之间制定它们：

/* base state */
#layout { 
	position: relative; 
	width: 900px; 
	border: 1px solid #ccc; 
	height: 200px; 
	
	/* animate width over a given duration */
	transition: width 2s;
}
.child {
	top: 0; 
	bottom: 0;
	width: 290px;
	position: absolute;
	opacity: 1;
	font-size: 20px;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
	
	/* animate opacity, left, width over a given duration */
	transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
	#child1 { left: 0; background: lightblue; }
	#child2 { left: 300px; background: lightgreen; }
	#child3 { left: 600px; background: lightyellow; }

/* 
	When the client has 860 width or less:
	 	- animate the first two elements to be wider
		- fade out and hide the third element
		- animate the background colors
		- animate the font-size of the block
*/
@media screen and (max-width: 860px) {
	#layout { width: 600px; }
	.child { width: 290px; font-size: 12px; }
	#child1 { left: 0; background: blue; color: #fff; }
	#child2 { left: 300px; background: green; color: #fff; }
	#child3.child { /* hider */ opacity: 0; width: 0; }
}

The creativity is all in the developer's hands; animating media queries isn't difficult, but the use of them is more interesting. Some sites used to animate the position of structure elements during window resize, which is nice but how often is that a realistic usage? A more realistic usage is with mobile devices, animating elements when orientation changes:

创造力完全掌握在开发人员手中。 为媒体查询设置动画并不难，但是使用它们会更有趣。 有些站点在调整窗口大小时曾经使用动画制作结构元素的位置，这很好，但是这种实际用法有多少次？ 更现实的用法是在移动设备上，当方向发生变化时会为元素设置动画：

/* base mobile styles */
#sidebar {
	transition: opacity 2s;
	width: 300px;
	overflow: hidden;
}

/* portrait */
@media screen and (orientation:portrait) { 
	/* portrait-specific styles */ 
	#sidebar {
		opacity: 0;
		width: 0;
	}
}

/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
	#sidebar {
		opacity: 1;
	}
}

The animation above triggers when the device goes from portrait to landscape, and visa versa. This is incredibly useful when hiding a pane in portrait view and elegantly showing that pane when the user switches to landscape view.

当设备从纵向移动到横向时触发以上动画，反之亦然。 在以纵向视图隐藏窗格并在用户切换到横向视图时优雅地显示该窗格时，这非常有用。

View Demo 观看演示

CSS animations between media queries have traditionally been a delicacy of web design, but there are practical uses. The best part of them? There is no JavaScript involved and you can force CSS hardware acceleration if you'd like. Take a few moments to look at your mobile site to see if you can add this effect.

媒体查询之间CSS动画历来是网页设计的精致，但也有实际用途。 他们中最好的部分？ 它不涉及JavaScript，并且您可以根据需要强制CSS硬件加速 。 花一点时间查看您的移动网站，看看是否可以添加此效果。

翻译自: https://davidwalsh.name/animate-media-queries

css动画和js动画