CSS不显示任何动画，并且关键帧不透明
我有一段非常基本的HTML，其目的是使动画从display: none;变为display: block不透明，从0变为1。
我使用的是Chrome浏览器，该浏览器使用-webkit前缀作为首选项，并进行了-webkit- keyframes过渡设置以使动画成为可能。但是，它不起作用，只是在display不褪色的情况下进行了更改。
我有一个JSFiddle 。
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
@-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: 1;
}
}
</style>
<body>
<div id="parent">
Hover on me...
<div id="myDiv">
Hello!
</div>
</div>
</body>
</head>
</html>
问题答案：
如果您正在使用@keyframes，则应使用-webkit-animation而不是-webkit- transition。
请参见下面的代码段：
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
}
.parent:hover .myDiv {
display: block;
opacity: 1;
/* "both" tells the browser to use the above opacity
at the end of the animation (best practice) */
-webkit-animation: display-none-transition 1s both;
animation: display-none-transition 1s both;
}
@-webkit-keyframes display-none-transition {
0% {
opacity: 0;
}
}
@keyframes display-none-transition {
0% {
opacity: 0;
}
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
2016年更新的答案
为了反映当今的最佳做法，我将使用过渡而不是动画。这是更新的代码：
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.parent:hover .myDiv {
opacity: 1;
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
-
我做了一个动画为一些元素（图像和按钮）淡入淡出使用不透明度。除了Safari之外，它在所有浏览器上都能完美地工作。当我尝试在Safari中运行它时，我的所有元素都有100%的不透明度，没有任何动画可以看到… 来自button元素的示例： 以下是我的HTML： 和我的CSS：
-
问题内容： CSS3动画出现问题。 仅当我删除的更改时，此代码才有效。 我想在悬停后立即更改显示，但不透明度应使用过渡进行更改。 问题答案： 我改变了一点，但结果很漂亮。 谢谢大家
-
问题内容： 我有以下代码： 执行javascript函数后，动画会停止，但会突然停止。 我可以平稳地停止动画，以避免突然跳入，然后从停止的位置再次继续动画吗？ 问题答案： 您不会喜欢这个答案，但现实是CSS3动画对于实现此目的并不是真正有用。为了完成这项工作，您需要在Javascript中复制很多CSS，这会破坏点（例如，在此密切相关的答案中，例如，[更改动画CSS3的速度？）。要真正使它平稳停止
-
我正在工作的HTML5横幅有很多CSS3动画。为了制作可重用的关键帧动画，我在单个元素上使用了多个动画。除了Safari之外一切都很顺利。 CSS： jsfiddle链接 可行的解决方案： 用另一个/更多元素包装该元素&为每个元素添加单个动画。此解决方案需要为包装器元素设置额外的样式。 将多个动画合并为一个&此解决方案增加了的复杂性，并且对于复杂的动画不容易维护。 根据另一个stackOverfl
-
本文向大家介绍什么是关键帧动画？相关面试题，主要包含被问及什么是关键帧动画？时的应答技巧和注意事项，需要的朋友参考一下 表示关键状态的帧动画叫做关键帧动画。 所谓关键帧动画，就是给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。
-
问题内容： 我有一个div的CSS动画，经过一定时间后会滑入。我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推到页面上。 当我在第一个div尝试此操作时，即使看不见，幻灯片仍会占用空间。如果我将div更改为div，则根本不会滑入。 我如何让div在不定时的情况下不占用空间（使用CSS进行计时）。 我正在为动画使用Animate.css。 代码如下所示： 如代码所示，我希望隐藏主d