如何防止css关键帧动画在页面加载时运行? [英] How to prevent css keyframe animation to run on page load?

问题描述

我有一个 div，我可以在其中对内容进行动画处理:

#container {位置:相对；宽度:100px；高度:100px；边框样式:插入；}#内容 {可见性:隐藏；-webkit-animation:animDown 1s 轻松；位置:绝对；顶部:100px；宽度:100%；高度:100%；背景颜色:浅绿色；}#container:hover #content {-webkit-animation:animUp 1s 轻松；动画填充模式:向前；-webkit-animation-fill-mode:转发；}@-webkit-keyframes animUp {0% {-webkit-transform: translateY(0);可见性:隐藏；不透明度:0；}100% {-webkit-transform: translateY(-100%);可见性:可见；不透明度:1；}}@-webkit-keyframes animDown {0% {-webkit-transform: translateY(-100%);可见性:可见；不透明度:1；}100% {-webkit-transform: translateY(0);可见性:隐藏；不透明度:0；}}

<div id="内容"></div>

悬停内容滑入容器 div.我的问题是，当我刷新页面时，页面加载 #content 的 animDown 动画将运行，我希望它仅在悬停事件后运行.

有没有办法做到这种纯 CSS，或者我必须在 JS 中找出一些东西?

http://jsfiddle.net/d0yhve8y/

解决方案

解决方案 1 - 在第一次悬停时添加向下动画

可能最好的选择是在用户第一次将鼠标悬停在 container 上之前不要打开向下动画.

这涉及到侦听 mouseover 事件，然后添加一个带有动画的类，然后移除事件侦听器.其主要(潜在)缺点是它依赖于 Javascript.

;(function(){var c = document.getElementById('container');函数添加动画(){c.classList.add('动画')//移除监听器，不再需要c.removeEventListener('mouseover', addAnim);};//监听容器的鼠标悬停c.addEventListener('mouseover', addAnim);})();

#container {位置:相对；宽度:100px；高度:100px；边框样式:插入；}#内容 {位置:绝对；顶部:100像素；宽度:100%；高度:100%；背景颜色:浅绿色；不透明度:0;}/* 这是在第一次鼠标悬停时添加的 */#container.animated #content {-webkit-animation:animDown 1s 缓动；}#container:hover #content {-webkit-animation:animUp 1s 轻松；动画填充模式:转发；-webkit-animation-fill-mode:forwards;}@-webkit-keyframes animUp {0% {-webkit-transform:translateY(0);不透明度:0;}100% {-webkit-transform:translateY(-100%);不透明度:1；}}@-webkit-keyframes animDown {0% {-webkit-transform:translateY(-100%);不透明度:1；}100% {-webkit-transform:translateY(0);不透明度:0;}}

<div id="内容"></div>

解决方案 2 - 播放隐藏动画

另一种解决方法是最初隐藏元素，确保动画在隐藏时播放，然后使其可见.这样做的缺点是时间可能会稍微偏离，并且过早地显示出来，而且悬停也无法立即使用.

这需要一些 Javascript 等待动画的长度，然后才使 #content 可见.这意味着您还需要将初始 opacity 设置为 0，这样它就不会在加载时出现，并从关键帧中删除 visibility -这些无论如何都没有做任何事情:

//等待动画长度，加一点，然后让元素可见window.setTimeout(function() {document.getElementById('content').style.visibility = 'visible';}, 1100);

#container {位置:相对；宽度:100px；高度:100px；边框样式:插入；}#内容 {可见性:隐藏；-webkit-animation:animDown 1s 缓动；位置:绝对；顶部:100像素；宽度:100%；高度:100%；背景颜色:浅绿色；不透明度:0;}#container:hover #content {-webkit-animation:animUp 1s 轻松；动画填充模式:转发；-webkit-animation-fill-mode:forwards;}@-webkit-keyframes animUp {0% {-webkit-transform:translateY(0);不透明度:0;}100% {-webkit-transform:translateY(-100%);不透明度:1；}}@-webkit-keyframes animDown {0% {-webkit-transform:translateY(-100%);不透明度:1；}100% {-webkit-transform:translateY(0);不透明度:0;}}

<div id="内容"></div>

解决方案 3 - 使用过渡

在您的场景中，您只能通过将 keyframe 替换为 transition 来制作此 CSS，因此它以 opacity:0 开头> 并且只是悬停在 opacity 和 transform 中发生了变化:

#container {位置:相对；宽度:100px；高度:100px；边框样式:插入；}#内容 {位置:绝对；顶部:100像素；宽度:100%；高度:100%；背景颜色:浅绿色；/* 初始状态 - 隐藏 */不透明度:0;/* 将属性设置为动画 - 适用于悬停和还原 */过渡:不透明度1s，变换1s；}#container:hover #content {/* 只需设置要更改的属性 - 无需更改可见性 */不透明度:1；-webkit-transform:translateY(-100%);变换:translateY(-100%);}

<div id="内容"></div>

I have a div in which I animate the content:

#container {
  position: relative;
  width: 100px;
  height: 100px;
  border-style: inset;
}
#content {
  visibility: hidden;
  -webkit-animation: animDown 1s ease;
  position: absolute;
  top: 100px;
  width: 100%;
  height: 100%;
  background-color: lightgreen;
}
#container:hover #content {
  -webkit-animation: animUp 1s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animUp {
  0% {
    -webkit-transform: translateY(0);
    visibility: hidden;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-100%);
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes animDown {
  0% {
    -webkit-transform: translateY(-100%);
    visibility: visible;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    visibility: hidden;
    opacity: 0;
  }
}

<div id="container">
  <div id="content"></div>
</div>

On hover content slides into the container div. My problem is, when I refresh the page, and the page loads the #content's animDown animation will run, and I'd prefer it to run only after a hover event.

Is there a way to do this pure CSS, or I have to figure something out in JS?

http://jsfiddle.net/d0yhve8y/

解决方案

Solution 1 - Add down animation on first hover

Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.

This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.

;(function(){
    var c = document.getElementById('container');
    function addAnim() {
        c.classList.add('animated')
        // remove the listener, no longer needed
        c.removeEventListener('mouseover', addAnim);
    };

    // listen to mouseover for the container
    c.addEventListener('mouseover', addAnim);
})();

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}
#content {
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;
    opacity:0;
}

/* This gets added on first mouseover */
#container.animated #content {
    -webkit-animation:animDown 1s ease;
}

#container:hover #content {
    -webkit-animation:animUp 1s ease;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes animUp {
    0% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
}
@-webkit-keyframes animDown {
    0% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
}

<div id="container">
    <div id="content"></div>
</div>

Solution 2 - play animation hidden

Another way around this is to initially hide the element, make sure the animation plays while it is hidden, then make it visible. The downside of this is that the timing could be slightly off and it is made visible too early, and also the hover isn't available straight away.

This requires some Javascript which waits for the length of the animation and only then makes #content visible. This means you also need to set the initial opacity to 0 so it doesn't appear on load and also remove the visibility from the keyframes - these aren't doing anything anyway:

// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
    document.getElementById('content').style.visibility = 'visible';
}, 1100);

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}

#content {
    visibility:hidden;
    -webkit-animation:animDown 1s ease;
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;
    opacity:0;
}

#container:hover #content {
    -webkit-animation:animUp 1s ease;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes animUp {
    0% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
}

@-webkit-keyframes animDown {
    0% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
}

<div id="container">
    <div id="content"></div>
</div>

Solution 3 - Use transitions

In your scenario, you can make this CSS only by replacing the keyframes with a transition instead, so it starts with opacity:0 and just the hover has a change in opacity and the transform:

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}

#content {
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;

    /* initial state - hidden */
    opacity:0;
    /* set properties to animate - applies to hover and revert */
    transition:opacity 1s, transform 1s;
}

#container:hover #content {
    /* Just set properties to change - no need to change visibility */
    opacity:1;
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
}

<div id="container">
    <div id="content"></div>
</div>

这篇关于如何防止css关键帧动画在页面加载时运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！