CSS3:动画之间的平滑过渡:hover

Posted

技术标签:

【中文标题】CSS3:动画之间的平滑过渡:hover【英文标题】:CSS3: Smooth transition between animations change on :hover 【发布时间】:2014-04-10 23:56:25 【问题描述】:

我有一个具有无限 css3 动画的元素,当元素悬停时会更改为另一个无限动画。一切都很好,但有时动画变化太有弹性了,有没有办法在 mouseenter 和 mouseleave 上使动画之间的过渡平滑(也许将元素带到动画之间的初始状态)?两个动画的开始和结束状态是一样的。

@keyframes first-animation 
0%  transform: scale3d(1,1,0);
50%  transform: scale3d(0.8,0.8,0); 
100%  transform: scale3d(1,1,0); 
;

@keyframes second-animation 
0%  transform: scale3d(1,1,0); 
70%  transform: scale3d(0.7,0.7,0); 
80%  transform: scale3d(0.9,0.9,0); 
100%  transform: scale3d(1,1,0);  
;

div
animation: first-animation 1.7s ease-in-out infinite;


div:hover, div:focus
animation: second-animation 1.1s ease-in-out infinite;

【问题讨论】:

你的意思是纯CSS解决方案吗?如果是这样,答案是否定的。如果没有,那么您可以等待onAnimationEnd 事件来切换它 为了更精确的动画,我会退出'ease-in-out'并尝试cubic-beizer() cubic-bezier.com 【参考方案1】:

我不认为可以使用比例变换来实现。

你可以做一个技巧,从 scale() 更改为 translateZ()。当应用透视时,净效果也将是一个比例。但有趣的一点是,将透视设置为高值,这种比例效应可以做得非常小。透视是一种动画属性。

缺点是我们需要添加 2 个环绕层……但最终结果是这样的。我保留了原始版本来比较

@keyframes first-animation 
0%  transform: scale(1,1);
50%  transform: scale(0.8,0.8); 
100%  transform: scale(1,1); 


@keyframes second-animation 
0%  transform: scale(1,1); 
70%  transform: scale(0.7,0.7); 
80%  transform: scale(0.9,0.9); 
100%  transform: scale(1,1);  


.sample 
    background-color: lightblue;
    animation: first-animation 1.7s ease-in-out infinite;


.sample:hover 
animation: second-animation 1.1s ease-in-out infinite;


.dim 
    width: 200px;
    height: 200px;


.base1 
    perspective: 1000px;
    transition: perspective 2s ease-out;
    position: absolute;
    left: 300px;
  top: 10px;

.base1:hover 
    perspective: 9999px;


.base2 
    width: 100%;
    height: 100%;
    animation: animation1 1.7s ease-in-out infinite;
    perspective: 9999px;
    transition: perspective 2s ease-in;

.base1:hover .base2 
    perspective: 1000px;


.inner 
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    animation: animation2 1.1s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 99999px;


@keyframes animation1 
0%  transform: translateZ(0px);
50%  transform: translateZ(-200px); 
100%  transform: translateZ(0px); 


@keyframes animation2 
      0%  transform: translateZ(0px);
     70%  transform: translateZ(-300px); 
     80%  transform: translateZ(-100px); 
    100%  transform: translateZ(0px); 
<div class="sample dim">SAMPLE</div>
<div class="base1 dim">
    <div class="base2">
        <div class="inner">DEMO</div>
    </div>
</div>

【讨论】:

【参考方案2】:

你用过转场吗??如果没有,请在父div中添加过渡规则。

div
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;

【讨论】:

【参考方案3】:

为了获得所需的效果,您需要使用 css3 动画事件。在这种情况下,您需要使用“AnimationIteration”。因此,您可以在迭代后触发事件。我为第二个动画在这个事件的末尾添加了一个类。

Codepen Demo

$(document).ready(function() 
  var animationElement = $(".animation");

  $("body").on(
    mouseover: function() 
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() 
        animationElement.addClass("second-animation");
      );
    ,
    mouseleave: function() 
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() 
        animationElement.removeClass("second-animation");
      );
    
  );
);

【讨论】:

以上是关于CSS3:动画之间的平滑过渡:hover的主要内容,如果未能解决你的问题,请参考以下文章

CSS3之过渡

css3过渡和动画的区别详解

CSS3:动画精灵+悬停过渡

FireFox 中的同步 CSS3 过渡不平滑

前端学习(18)~css3属性学习:动画详解

css3的过渡和动画的属性介绍