css3 平滑过渡动画效果_平滑过渡的纯CSS响应式布局
css3 平滑过渡动画效果
View demo 查看演示 Download Source 下载源
In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a navigation which will allow us to navigate between the panels. We’ll use radio buttons for the navigation and animate the content to the right position with a transition, creating a “smooth scrolling” effect. This layout idea could be useful for web pages or web apps where the content should be strictly the size of the screen (width and height). Note that this is, of course, highly experimental and just a proof-of-concept.
在本教程中，我们将创建带有一些平滑页面过渡的自适应100％宽度/高度布局。 这个想法是要有一些内容面板和一个导航，这将使我们能够在面板之间导航。 我们将使用单选按钮进行导航，并通过过渡将内容动画化到正确的位置，从而创建“平滑滚动”效果。 对于内容应严格为屏幕尺寸(宽度 和 高度)的网页或Web应用程序，此布局想法可能很有用。 注意，这当然是高度实验性的，只是概念验证。
Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. 请注意：本教程的结果只能在支持各自CSS属性的浏览器中按预期工作。
Note that we will exclude vendor prefixes in this tutorial. You will, of course, find them in the files.
请注意，在本教程中我们将排除供应商前缀。 您当然会在文件中找到它们。
标记 (The Markup)
The structure will be consist of a main container with the class st-container which will contain the radio buttons and link, and the wrapper with the class st-scroll for the panels. Each panel will have some content elements:
该结构将由一个带有st-container 类的主容器组成，其中将包含单选按钮和链接，以及一个带有带有st-scroll 类的面板的包装器。 每个面板将具有一些内容元素：
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2"/>
<a href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3"/>
<a href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4"/>
<a href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5"/>
<a href="#st-panel-5">Passion</a>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-deco" data-icon="H"></div>
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed...</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<!-- ... -->
</section>
<!-- ... st-panel-3, st-panel-4, st-panel-5 -->
</div><!-- // st-scroll -->
</div><!-- // st-container -->What we want to do is basically move the panel wrapper by changing it’s top value and bringing the respective panel into the viewport. This we can do by selecting the sibling of a checked radio button, the st-scroll division, with the sibling combinator and target the correct panel inside. Because of this technique, we need to keep the radio buttons in the same level like the st-scroll and on top of the links (they will be invisible though, since we’ll give them 0 opacity). For being able to select the correct panel, we give IDs to them and to the radio buttons.
我们要做的基本上是通过更改面板包装的最高值并将相应的面板放入视口来移动面板包装。 我们可以通过选择选中的单选按钮的同级对象( st-scroll 分区)以及同级组合器，并在其中定位正确的面板来做到这一点。 由于这项技术，我们需要将单选按钮保持在与st-scroll 相同的级别上，并在链接的顶部(尽管它们将是不可见的，因为我们将其设置为0不透明)。 为了能够选择正确的面板，我们给它们和单选按钮赋予了ID。
The reason why we use links and not, like usually, labels, is that we want to be able to create some kind of “fallback” for non-supportive browsers (sibling combinators don’t work in older browsers). The links have the href value of the panels’ IDs, so for the fallback, we’ll simply hide the radio buttons, making the links clickable which will make it possible to “jump” to the right panel.
之所以我们使用链接而不是像通常那样使用标签，是因为我们希望能够为不支持的浏览器创建某种“后备”(兄弟组合器在较旧的浏览器中不起作用)。 链接具有面板ID的href值，因此对于后备，我们将简单地隐藏单选按钮，使链接可单击，从而可以“跳至”右侧面板。
I know that it might be desirable to have the respective hashtag in the URL once we click on an input but with this technique that we’ll use for this layout it is not (yet) possible with CSS-only (parent selectors would be really nice to have!).
我知道，可能需要在单击输入后在URL中具有相应的标签，但是通过这种将用于布局的技术，(仅)纯CSS尚不可能(父选择器实际上是很高兴有！)。
OK, let’s style this thing!
好的，让我们为这东西设计样式！
CSS (The CSS)
Now, how do we make this layout flexible and its panels exactly the size of the screen? The trick is to make the main container absolute with a width and height of 100% while setting the panels and their wrapper to position relative. But they will also have a width and height of 100%. This will make each panel be exactly the size of the screen (since the main container and the panel wrapper are) but allow an overflow of the content, stacking the panels in the classic way.
现在，我们如何使该布局灵活，其面板恰好与屏幕大小相同？ 技巧是将主容器的宽度和高度设为100％的绝对高度，同时将面板及其包装材料设置为相对位置。 但是它们的宽度和高度也将为100％。 这将使每个面板与屏幕的尺寸完全相同(因为主容器和面板包装器都是这样)，但允许内容溢出，以经典方式堆叠面板。
Since we’ll do the content navigation by animating the panel wrapper, we’ll set the body overflow to hidden:
由于我们将通过设置面板包装的动画来进行内容导航，因此我们将主体溢出设置为隐藏：
body {
overflow: hidden;
}Let’s take a look at the main container’s style:
让我们看一下主容器的样式：
.st-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}We’ll put the “navigation” at the bottom of the page by giving it a fixed position. Note that we are setting the same width and height for both, the input and the link. The idea is to overlay the radio button on the link elements so that they are clickable, but giving them 0 opacity so that they are not visible. Ans because of that it’s also important that we set the z-index of the radio buttons higher than the one of the link elements:
我们将“导航”放置在页面底部，方法是将其固定放置。 请注意，我们为输入和链接设置了相同的宽度和高度。 想法是将单选按钮覆盖在链接元素上，以便它们可以单击，但赋予它们0不透明度，以使它们不可见。 因此，将单选按钮的z-index设置为高于链接元素之一也很重要：
.st-container > input,
.st-container > a {
position: fixed;
bottom: 0px;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}
.st-container > input {
opacity: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}Since we are using percentages to spread the links and inputs across the width of the screen, we might get into some rounding trouble that will make some gaps appear. In order to hide that, well use a pseudo element that will be under the links and inputs. It will have the same background color like the link elements:
由于我们使用百分比来将链接和输入分布在屏幕的整个宽度上，因此我们可能会遇到一些四舍五入的麻烦，从而会出现一些缝隙。 为了隐藏该内容，请很好地使用将在链接和输入下的伪元素。 它将具有与链接元素相同的背景色：
.st-container:before {
content: '';
position: fixed;
width: 100%;
height: 34px;
background: #e23a6e;
z-index: 9;
bottom: 0;
}Our links and inputs are still not positioned, so let’s give them their respective left values:
我们的链接和输入仍未定位，因此让我们给它们分别指定左值：
#st-control-1, #st-control-1 + a {
left: 0;
}
#st-control-2, #st-control-2 + a {
left: 20%;
}
#st-control-3, #st-control-3 + a {
left: 40%;
}
#st-control-4, #st-control-4 + a {
left: 60%;
}
#st-control-5, #st-control-5 + a {
left: 80%;
}As you can see, we are using the adjacent sibling selector to “reach” the direct sibling of an input which is the related link element.
如您所见，我们正在使用相邻的同级选择器来“到达”相关链接元素的直接同级输入。
Using the same principle, we will define a “selected” state for the link elements. Once we click on an input, we will give the sibling link element a different background color:
使用相同的原理，我们将为链接元素定义“选定”状态。 单击输入后，将为兄弟链接元素提供不同的背景色：
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}Let’s also add a little triangle using the pseudo-class :after and give it the same color:
我们还使用伪类：after添加一个小三角形，并为其赋予相同的颜色：
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
bottom: 100%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #821134;
border-width: 20px;
left: 50%;
margin-left: -20px;
}You can check out CSS Arrow, Please! if you want a quick way to create those arrows.
您可以查看CSS Arrow，请！ 如果您想快速创建这些箭头。
Let’s also define a hover state for the link element:
我们还为link元素定义一个悬停状态：
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}The wrapper for the panels and the panels will have relative position and we’ll give them a width and height of 100%. The panel wrapper will also get a top and left position of 0 while we don’t touch the the values for the panels (it will be auto).
面板和面板的包装将具有相对位置，我们将为它们指定100％的宽度和高度。 当我们不触摸面板的值时，面板包装器的顶部和左侧位置也将为0(它将是自动的)。
The transition will be for animating the transform property value to the respective position:
过渡将用于将转换 属性值动画化到相应位置：
.st-scroll,
.st-panel {
position: relative;
width: 100%;
height: 100%;
}
.st-scroll {
top: 0;
left: 0;
transition: all 0.6s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.st-panel{
background: #fff;
overflow: hidden;
}Although I usually don’t add any vendor prefixed properties, I did wanted to leave these Webkit ones since they will help tremendously in creating a smooth experience.
尽管我通常不添加任何供应商前缀属性，但我确实想保留这些Webkit的属性，因为它们将极大地帮助创建流畅的体验。
Let’s define the positions for the st-scroll wrapper for each checked radio button. Since we know that every panel has a height of 100% we know the exact positions. We will use the transform property to translate the panel wrapper in the Y-dimension (up and down):
让我们为每个选中的单选按钮定义st-scroll 包装器的位置。 因为我们知道每个面板的高度都为100％，所以我们知道确切的位置。 我们将使用transform属性在Y维度(上下)中平移面板包装：
#st-control-1:checked ~ .st-scroll {
transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
transform: translateY(-400%);
}Now, let’s style the content elements. For the upper triangle with the icon we’ll simply rotate and translate the st-deco division. We’ll position it in the center top of the screen by setting the top to 0 and the left to 50% while giving it a left margin of minus half of it’s width. Translating it -50% will make only half of the box appear thus creating a triangle:
现在，让我们设置内容元素的样式。 对于带有图标的上部三角形，我们将简单地旋转和转换st-deco 分区。 通过将顶部设置为0，将左侧设置为50％，同时将其左边距减去宽度的一半，将其放置在屏幕的中央顶部。 将其转换为-50％只会使框的一半出现，从而创建一个三角形：
.st-deco{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -100px;
background: #fa96b5;
transform: translateY(-50%) rotate(45deg);
}For the icon we’ll use the Raphaël Icon-Set via @font-face and the data-attribute/pseudo-class technique. The content of the pseudo-element :after will be the data-icon value that we’ve set in the HTML for that element. Note, that we need to rotate it back into the opposite direction of the parent element in order to have it back to “normal”:
对于图标，我们将通过@ font-face使用Raphaël图标集和data-attribute / pseudo-class技术。 伪元素：after的内容将是我们在HTML中为该元素设置的data-icon值。 注意，我们需要将其旋转回与父元素相反的方向，以使其回到“正常”状态：
[data-icon]:after {
content: attr(data-icon);
font-family: 'RaphaelIcons';
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 90px;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
transform: rotate(-45deg) translateY(25%);
}The heading will be placed in the center of the screen with a negative top margin in order to “pull” it up a bit:
标题将以负的上边距放置在屏幕中央，以便将其“拉”一点：
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}Every time we click on an input, we want the respective heading to run an animation. It will animate a bit from the top and fade in at the same time. In order to select the correct heading, we will use the general sibling combinator:
每次单击输入时，我们都希望相应的标题运行动画。 它将从顶部开始动画，并同时淡入。 为了选择正确的标题，我们将使用常规的同级组合器：
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}The paragraph will have the following style:
该段将具有以下样式：
.st-panel p {
position: absolute;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #8b8b8b;
z-index: 2;
padding: 0;
width: 50%;
left: 25%;
top: 50%;
margin: 10px 0 0 0;
-webkit-backface-visibility: hidden;
}While the heading of a panel will move down, the paragraph will move up:
面板标题将向下移动时，该段落将向上移动：
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveUp{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}In order to make out layout a bit more fun, we’ll add a color class and “invert” the colors for those panels and its content elements:
为了使布局更加有趣，我们将添加一个颜色类并“反转”这些面板及其内容元素的颜色：
/* Colored sections */
.st-color,
.st-deco{
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: rgba(255,255,255,0.8);
}Last, but not least, we will add some media queries to control the position and font size of the elements for smaller screens:
最后但并非最不重要的一点，我们将添加一些媒体查询来控制较小屏幕的元素的位置和字体大小：
@media screen and (max-width: 520px) {
.st-panel h2 {
font-size: 42px;
}
.st-panel p {
width: 90%;
left: 5%;
margin-top: 0;
}
.st-container > a {
font-size: 13px;
}
}
@media screen and (max-width: 360px) {
.st-container > a {
font-size: 10px;
}
.st-deco{
width: 120px;
height: 120px;
margin-left: -60px;
}
[data-icon]:after {
font-size: 60px;
transform: rotate(-45deg) translateY(15%);
}
}For older browsers that don’t support some of the selectors we want to fall back to the classic “target jump”. We can do that by altering some of the style (simple.css). In particular, we will set the overflow of the body to “auto” and hide the inputs, making the link elements clickable (as href they have the ID of the respective panels):
对于不支持某些选择器的较旧的浏览器，我们希望退回到经典的“目标跳转”。 我们可以通过更改某些样式(simple.css)来实现。 特别是，我们将主体的溢出设置为“自动”并隐藏输入，使链接元素可单击(因为href具有相应面板的ID)：
body {
overflow: auto;
}
.st-container > input{
display: none;
}And that’s all! I hope you enjoyed this tutorial and find it inspiring!
就这样！ 希望您喜欢本教程并从中获得启发！
翻译自: https://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
css3 平滑过渡动画效果