这是一个非常简单的问题，但是我找不到关于CSS转换属性的很好的文档。下面是CSS代码片段:
.nav a
{
text-transform:uppercase;
text-decoration:none;
color:#d3d3d3;
line-height:1.5 em;
font-size:.8em;
display:block;
text-align:center;
text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
.nav a:hover
{
color:#F7931E;
text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}
正如您所看到的，转换属性正在相互覆盖。现在，文本阴影会动画化，但颜色不会。我如何让他们同时动画?谢谢你的回答。
下面是一个LESS mixin，用于一次转换两个属性:
.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
-webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
-moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
-o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}
在Sass中，你可以使用下面的代码来实现
@mixin transition($transitions...) {
$unfoldedTransitions: ();
@each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
}
-webkit-transition: $unfoldedTransitions;
transition: $unfoldedTransitions;
}
@function unfoldTransition ($transition) {
// Default values
$property: all;
$duration: .2s;
$easing: null; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want
$defaultProperties: ($property, $duration, $easing, $delay);
// Grab transition properties if they exist
$unfoldedTransition: ();
@for $i from 1 through length($defaultProperties) {
$p: null;
@if $i <= length($transition) {
$p: nth($transition, $i)
} @else {
$p: nth($defaultProperties, $i)
}
$unfoldedTransition: append($unfoldedTransition, $p);
}
@return $unfoldedTransition;
}
// Usage: @include transition(width, height 0.3s ease-in-out);
所有功劳都归于tobiasahlin
https://gist.github.com/tobiasahlin
