css3动画旋转动画_使用CSS动画旋转单词

css3动画旋转动画

View demo 查看演示 Download Source 下载源

In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.

在今天的教程中，我们将创建另一个印刷效果。 想法是使用某种句子并旋转其中的一部分。 我们将使用CSS动画“交换”该句子的某些单词。

Please note: the result of this tutorial will only work as intended in browsers that support CSS animations.

请注意：本教程的结果只能在支持CSS动画的浏览器中按预期工作。

So let’s start!

因此，让我们开始吧！

In the following, we’ll be going through demo 2.

接下来，我们将演示2。

标记 (The Markup)

We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words:

我们将有一个带有h2标题的主包装，其中包含第一级跨度和旋转单词的两个除法：

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<span>creating</span>
		<div class="rw-words rw-words-1">
			<span>breathtaking moments</span>
			<span>lovely sounds</span>
			<span>incredible magic</span>
			<span>unseen experiences</span>
			<span>happy feelings</span>
			<span>beautiful butterflies</span>
		</div>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-2">
			<span>sugar</span>
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. For that we’ll be using CSS animations. We’ll create one animation for each division and each span will run it, just with different delays. So, let’s look at the CSS.

现在，忽略垃圾占位符文本，我们希望一次显示rw字的每个范围。 为此，我们将使用CSS动画。 我们将为每个分区创建一个动画，并且每个跨度将以不同的延迟运行它。 因此，让我们看一下CSS。

CSS3 (The CSS3)

First, we will style the main wrapper and center it on the page:

首先，我们将设置主包装的样式并将其放在页面的中心：

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
}

We’ll add some text shadow to all the elements in the heading:

我们将为标题中的所有元素添加一些文本阴影：

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

And add some specific text styling to the spans:

并为跨度添加一些特定的文本样式：

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow:

分隔将显示为内联元素，这将使我们可以将它们“插入”到句子中而不会破坏流程：

.rw-words{
	display: inline;
	text-indent: 10px;
}

Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow:

rw-words div内部的每个跨度将被绝对定位，我们将隐藏任何溢出：

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #6b969d;
}

Now, we’ll run two animations. As mentioned previously, we’ll run the same animation for all the spans in one div, just with different delays:

现在，我们将运行两个动画。 如前所述，我们将对一个div中的所有跨度运行相同的动画，只是延迟不同：

.rw-words-1 span{
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
	animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) { 
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) { 
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
	animation-delay: 15s; 
	color: #9b6b9d;
}

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds. We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation for the first words:

我们的动画将运行一个周期，这意味着每个跨度将显示一次，持续三秒钟，因此是延迟值。 整个动画将运行6(图像数量)* 3(出现时间)= 18秒。 我们将需要为不透明度值(或任何使跨度显示的值)设置正确的百分比。 用6除以18得到0.333…这将是关键帧步的33％。 我们想要在跨度上进行的所有操作都必须在此之前进行。 因此，在调整并查看最合适的内容之后，我们为第一个单词提出了以下动画：

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

We’ll fade in the span and we’ll also animate its height.

我们将在跨度中淡入淡出，并对其高度进行动画处理。

The animation for the words in the second div will fade in and animate their width. We added a bit to the keyframe step percentages here, because we want these words to appear just a tiny bit later than the ones of the first word:

第二个div中单词的动画将淡入并为其宽度设置动画。 在这里，我们在关键帧步长百分比上增加了一些，因为我们希望这些单词的出现时间比第一个单词稍晚一些：

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
	20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

And that’s it folks! There are many possibilities for the animations, you can check out the other demos and see what can be applied!

就是这样！ 动画有很多可能性，您可以查看其他演示并查看可以应用的内容！

演示版 (Demos)

1. Demo 1: Animate down

   演示1：向下动画

2. Demo 2: Animate height and width

   演示2：对高度和宽度进行动画处理

3. Demo 3: Fade in and “fall”

   演示3：淡入和“摔倒”

4. Demo 4: Animate width and fly in

   演示4：动画宽度并飞入

5. Demo 5: Rotate in 3D and “sharpen”

   演示5：以3D旋转并“锐化”

I hope you enjoyed this tutorial and find it inspiring!

希望您喜欢本教程并从中获得启发！

翻译自: https://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/

css3动画旋转动画