css过渡 取消过渡_CSS基础知识：CSS3过渡

css过渡 取消过渡

随着CSS3在网络上的推广，它带来了一些有趣的新演示技术。 今天，我们将回顾使用CSS3过渡和动画的基础知识，以增加额外的修饰。

本教程包括Tuts + Premium成员可用的截屏视频。

步骤1 –链接转换

首先，我们将使用一些基本技术-首先，当用户将鼠标悬停在指定元素上时，只需简单更改文本颜色即可。

a { color:#000; }
a:hover { color:#f00; }

在这里，我们将鼠标悬停时将文本颜色更改为红色。 现在，使用少量CSS3，我们可以通过逐渐淡入颜色来创建更加平滑的外观。

a{
color:#000;
-webkit-transition:color 1s ease-in;
}
a:hover{color:#f00;}

我们添加了css属性-webkit-transition。 请注意，-webkit前缀指定此选项仅在Webkit引擎或Safari和Chrome中有效。 幸运的是，其他现代浏览器也有自己的实现。 涵盖所有浏览器的完整声明可能类似于以下内容：

a {
color:#000;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}

请注意，在本教程中，我们将只专注于Webkit实现。 声明属性后，我们得到的值是“ color 1s easy-in”。 这是速记声明； 这三个值表示：

1. 要转换的属性
2. 过渡期
3. 过渡类型

在这种情况下，我们使用缓入过渡，这将缓慢开始过渡，并加快过渡速度。

步骤2 –背景转换

更改状态的另一个基本用途是更改焦点上的输入框的背景。

input.ourInputBox:focus{
-webkit-transition:background-color 0.5s linear;
background:#CCC;
}

这次，我们将过渡声明置于悬停状态，这样就不会在CSS中添加其他不必要的类。 输入框获得焦点后，我们将应用过渡。

步骤3 –过渡多个属性

实际上，CSS过渡相对来说很简单，可以添加到现有的悬停功能中，并为您的网站提供更多支持CSS3的浏览器。

为了更进一步，我们还可以使用CSS3过渡的简化版本来过渡多个CSS属性。

a.thebg {
color:#000;
background:#f00;
padding:5px;
-webkit-border-radius: 5px;
-webkit-transition-property:color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
a.thebg:hover {
color:#f00;
background:#000;
}

这次，背景和文本颜色在悬停时发生了变化，因此我们可以在过渡时将这两个属性作为目标。 我们简单地分割转换：首先，我们具有-webkit-transition-property，并用逗号分隔不同的值。 因此，我们分别针对颜色和背景属性。

-webkit-transition-property:color, background;

然后，我们使用以下命令设置过渡的持续时间：

-webkit-transition-duration:1s, 1s;

它们的引用顺序与第一条语句相同。 但这一次，两个值都设置为1s。

最后，我们设置计时函数，并设置两个不同的值：第一个是线性的，与我们第一个声明的变量– color有关； 第二个与可变背景有关。

因此，我们将颜色设置为在一秒钟内线性变化，并在同一时间段内设置背景为缓和。

全屏播

步骤4 –将各个部分放在一起

当CSS3转换与其他新CSS属性结合使用时，它们便开始出现了。

您可以在Andy Clarke的For a Beautiful Web中查看使用重叠元素和过渡的示例。

让我们创建一个简单的动画弹出标志示例。

我们首先为路标创建边界框，并为其提供一个相对的定位上下文，以确保我们可以在其中完全定位项目。

#signpost{
width:60px;
height:196px;
position:relative;
}

现在，我们将框放在页面上，然后将标牌的各个部分放在其中。

<div id="signpost">
<img id="post" src="post.png">
<img id="sign" src="sign.png">
</div>

接下来，以2的z索引定位帖子，以将其放置在符号上方。

#post{
width:79px;
height:196px;
z-index:2;
position:relative;
}

现在，我们添加位于帖子下方的符号，并使用CSS3 transform属性对其进行旋转。

#sign{
height:46px;
width:80px;
position:absolute;
top:10;
left:60;
-webkit-transform-origin:0 0;
-webkit-transform: rotate(86deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}

使用-webkit-transform旋转标志：rotate（86deg），并将其定位在桩下。 为了确保符号围绕适当的点旋转，我们必须将变换原点更改为左上角：0、0。

我们设置过渡以使用缓入配置文件在0.5s内更改-webkit-transform属性，并在悬停时将符号旋转回其原始方向。

#signpost:hover #sign{
-webkit-transform:rotate(0deg);
}

我们在包含#signpost：hover的对象上执行此操作，而不是在#sign本身的鼠标上进行操作。

步骤5 –动画介绍

现在，我们可以使用webkit动画将所有这些结合在一起，这使我们能够执行诸如连续旋转的操作。

我们首先创建两个圆形图像，然后将它们放置在一个包含div的位置–就像上面的路标一样。

<div id="circles">
<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/056_css_trans/images/outer.png" width="180" height="180" class="outercircle"/>
<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/056_css_trans/images/middle.png" width="90" height="90" class="middlecircle"/>
</div>

#circles{
width:180px;
height:180px;
position:relative;
}
.outercircle{
width:180px;
height:180px;
position:absolute;
z-index:1;
top:0:
left:0;
}
.middlecircle{
width:90px;
height:90px;
position:absolute;
z-index:3;
top:45px;
left:45px;
}

现在我们需要定义动画； 我们将沿相反的方向旋转圆圈，因此我们需要设置两个动画。

@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes spinrev {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}

给动画起一个参考名称，在本例中为“ spin”和“ spinrev”。 然后，我们他们分配到 和值; 因此我们使用webkit变换将图像从0度旋转到360度，反之则旋转到-360度。

现在，我们将此动画分配给悬停状态。 请注意，如果我们将其分配为正常状态，则动画将在页面加载后立即运行。

#circles:hover .outercircle {
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
}
#circles:hover .middlecircle{
-webkit-animation-name: spinrev;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
}

我们引用之前创建的动画名称（-webkit-animation-name：spin;）。 然后，声明希望动画运行的次数（-webkit-animation-iteration-count：无限；）。 在这种情况下，当#circles div悬停在其上时，infinite将使其不断旋转。

接下来，我们设置计时功能（-webkit-animation-timing-function：linear;），最后，我们为每次迭代设置一个持续时间-在这种情况下，它将是十秒（-webkit-animation-duration：10s ;），以及五个完整的革命。

第6步–使用Modenizr进行优雅的处理

一旦一切正常，我们应该考虑使用没有CSS3功能的Web浏览器进行浏览的用户。 使用JavaScript库（例如Modernizr）可以轻松完成此操作，该库向与浏览器功能相关HTML元素添加了类。

使用上面的路标示例，不支持CSS转换的浏览器将无法将路标正确放置在路标下； 因此我们可以定位这些浏览器，并简单地隐藏标志，直到将其悬停为止。

.no-csstransforms #signpost #sign{
display:none;
}
.no-csstransforms #signpost:hover #sign{
display:block;
}

就像链接到Modernizr脚本，找到适当的类名称，然后为该实例创建单独CSS语句一样简单。

结论

目前为止就这样了。 我希望你喜欢它！ 如果您有以下任何问题/意见，请告诉我！

翻译自: https://code.tutsplus.com/tutorials/css-fundamentals-css3-transitions--pre-10922

css过渡 取消过渡