CSS显示没有和透明度的动画关键帧不工作 [英] CSS display none and opacity animation with keyframes not working
问题描述
我有HTML的一个非常基本的一块，试图动画从的变化显示：无; 到显示：块不透明度改变从0到1。我用Chrome浏览器，它使用了 -webkit prefixes为preference，并做了一个 -webkit-关键帧过渡设置，使动画成为可能。但是，它不工作，只是改变了显示不褪色。
我有一个的jsfiddle 这里。
感谢：）
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;风格类型=文/ CSS＆GT;
#myDiv
{
显示：无;
不透明度：0;
填充：5像素;
颜色：＃600;
背景色：#CEC;
-webkit-过渡：350毫秒显示器，无过渡;
} #parent：悬停＆GT; #myDiv
{
不透明度：1;
显示：块;
} #parent
{
背景颜色：＃000;
颜色：#FFF;
宽度：500像素;
高度：500像素;
填充：5像素;
} @ -webkit-关键帧显示，无过渡
{
0％{
显示：无;
不透明度：0;
} 1％
{
显示：块;
不透明度：0;
} 100％
{
显示：块;
不透明度：1;
}
}
＆LT; /风格＆GT;
＆LT;身体GT;
＆LT; DIV ID =父＆GT;
将鼠标悬停在我身上......
＆LT; DIV ID =myDiv＆GT;
你好！
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; /头＆GT;
＆LT; / HTML＆GT;
如果您使用的是 @keyframes 你应该使用 -webkit-动画而不是 -webkit-过渡。下面是 @keyframes 动画DOC：的 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations 。
请参阅code以下片段：
.parent {\r
背景颜色：＃000;\r
颜色：#FFF;\r
宽度：500像素;\r
高度：500像素;\r
填充：5像素;\r
}\r
.myDiv {\r
显示：无;\r
不透明度：0;\r
填充：5像素;\r
颜色：＃600;\r
背景色：#cec;\r
}\r
.parent：悬停.myDiv {\r
显示：块;\r
不透明度：1;\r
/ *既讲述使用上述不透明的浏览器\r
在动画的最后（最佳实践）* /\r
-webkit-动画：显示 - 无过渡1S两者;\r
动画：显示 - 无过渡1S两者;\r
}\r
@ -webkit-关键帧显示，无过渡{\r
0％{\r
不透明度：0;\r
}\r
}\r
@keyframes显示，无过渡{\r
0％{\r
不透明度：0;\r
}\r
} \r
＆LT; DIV CLASS =父＆GT;\r
将鼠标悬停在我身上......\r
＆LT; DIV CLASS =myDiv＆GT;您好！＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
2016年修订答案
要反映当今的最佳实践，我会用一个过渡，而不是动画。这里是更新code：
.parent {\r
背景颜色：＃000;\r
颜色：#FFF;\r
宽度：500像素;\r
高度：500像素;\r
填充：5像素;\r
}\r
.myDiv {\r
不透明度：0;\r
填充：5像素;\r
颜色：＃600;\r
背景色：#cec;\r
-webkit-过渡：不透明度1秒;\r
过渡：不透明度1秒;\r
}\r
.parent：悬停.myDiv {\r
不透明度：1;\r
} \r
＆LT; DIV CLASS =父＆GT;\r
将鼠标悬停在我身上......\r
＆LT; DIV CLASS =myDiv＆GT;您好！＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
I have a very basic piece of HTML to try and animate the change from display: none; to display: block with opacity changing from 0 to 1. I use Chrome browser, which uses the -webkit prefixes as preference, and did a -webkit-keyframes transition set to make the animation possible. However, it does not work and just changes the display without fading.
I have a JSFiddle here.
Thanks :)
<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>
If you are using @keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for @keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
See code snippet below:
.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 UPDATED ANSWER
To reflect today's best practices, I would use a transition instead of an animation. Here is the updated code:
.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>
这篇关于CSS显示没有和透明度的动画关键帧不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
