CSS过渡-获得返回动画，不同于开始CSS属性

<!doctype html>
<html>
<head>
<style type="text/css">
#i {
height: 20px;
background-color: #999;
/*return animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
#i:hover {
height: 300px;
background-color: #F00;
/*begin animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
</head>
<body>
<div class="c" id="i" >Hover Me</div>
</body>
</html>

见上图。如何让框'hover me'结束它的黑颜色为红色，在/返回动画/，只使用CSS。它可以理解地返回到#999，但我不希望那样。

基本上:开始框20px， #999>>扩展300px>>收缩20px， #red

当使用像这样的过渡时，是否有一种方法可以将值传递给css属性:

-webkit-transition: background-color:red 0.4s ease-in 0.3s

谢谢你的帮助。我只是想了解最基本的。

你可以用CSS动画做一些非常接近的事情。

在元素上设置动画(不是过渡)，并暂停它。设置填充模式为forwards。在悬停时将动画设置为running。当动画结束时，结束状态保持。

警告-如果有人在动画完成之前停止悬停，它将保持在当前位置，直到再次悬停。

#i {
  height: 20px;
  background-color: #999;
  animation: animation 0.4s ease-in 0.3s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
#i:hover {
  animation-play-state: running;
}
@keyframes animation {
  0 {
    height: 20px;
    background-color: #999;
  }
  50% {
    height: 300px;
  }
  100% {
    height: 20px;
    background-color: red;
  }
}

<div class="c" id="i">Hover Me</div>

我想我们现在没有这样的东西，你可能使用JavaScript来做这种事情。

我必须使用jquery的组合添加和删除类。叹气

希望这个简单的代码帮助别人。如果有人有更好的东西，特别是纯css…我很乐意学习。@obi干杯，谢谢大家。

    <body>
    <div class="c" id="i" >Hover Me</div>
    <style>
    .c {height: 20px; background-color: #999;}
    /*----begin animation-----------------------------------*/
    #i:hover {
        height: 300px;
        background-color: #0F0;
        -webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
    }
    /*----return animation-----------------------------------*/
    .c_returnAnime {
        height: 100px;
        background-color: #F00; 
        -webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        -o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
        transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
    }
    </style>
    <script>
    $('#i').hover(
            //always add class before removing other or errors
            function(){ $(this).addClass('c_returnAnime') }, 
            function(){ $(this).removeClass('c') }
    )
    </script>
    </body>
    </html>

相关内容

最新更新

热门标签：