css3旋转缩放_使用CSS3创建旋转，缩放效果

css3旋转缩放

In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects is the spinning, zooming CSS animation.  Let me show you how it's done!

如果您不知道， CSS动画很棒。 它们是平滑的，比JavaScript负担更少，并且是浏览器中节点动画的未来。 Dojo的移动解决方案dojox.mobile使用CSS动画而不是JavaScript来减轻应用程序JavaScript占用空间。 我最喜欢的效果之一是旋转的缩放CSS动画。 让我向您展示如何完成！

View Demo 观看演示

CSS (The CSS)

The first task is creating the base animation with @-{vendor}-keyframes:

第一个任务是使用@-{vendor}-keyframes创建基础动画：

@keyframes rotater {
0% { transform:rotate(0) scale(1) }
50% { transform:rotate(360deg) scale(2) }
100% { transform:rotate(720deg) scale(1) }
}

The -webkit-transform property is the animator in this animation.  Define that at 0% the element is at 0 rotation and scaled to 1 -- that is the original state of the element.  At 50% of the animation, the element should be rotated 360 degrees (a complete spin), and the element should grow twice in size.  At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.

-webkit-transform属性是此动画中的动画设计器。 定义元素在0％处旋转0度并缩放为1-这是元素的原始状态。 在动画的50％时，应将元素旋转360度(完整旋转)，并且元素的大小应增加两倍。 设为100％时，元素应返回其原始比例并旋转720度，因此外观与开始时相同。

With our named animation created, it's time to apply the animation to an element upon its hover state:

创建我们命名的动画之后，是时候将动画应用于元素的悬停状态了：

a.advert:hover { 
	/* safari / chrome / mozilla */
	animation-name:rotater; 
	animation-duration:500ms; 
	animation-iteration-count:1; 
	animation-timing-function: ease-out;

	/* opera */
	-o-transform:rotate(360deg) scale(2);
	-o-transition-duration:500ms;
	-o-transition-timing-function: ease-out;

	/* ie */
	-ms-transform:rotate(360deg) scale(2);
	-ms-transform-duration:500ms;
	-ms-transform-timing-function: ease-out;
}

The event is assigned using the -webkit-animation-name property.  Additional properties are assigned:  -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.

使用-webkit-animation-name属性分配事件。 分配了其他属性： -webkit-animation-duration使动画持续500毫秒， -webkit-animation-iteration-count指示动画仅发生一次，并且-webkit-animation-timing-function将缓动过渡设置为easy-出来。

View Demo 观看演示

I highly recommend using using this effect with fixed-size DOM nodes, with background images.  Using this effect with simple DOM nodes doesn't look great.  Let me know what you think about this animation, and what you think it could use to look even better!

我强烈建议对固定大小的DOM节点和背景图像使用这种效果。 在简单的DOM节点上使用这种效果看起来并不好。 让我知道您对这个动画的看法，以及您认为它可以用来看起来更好的动画！

翻译自: https://davidwalsh.name/css-zoom

css3旋转缩放