CSS 显示无和不透明动画，关键帧不起作用 [英] CSS display none and opacity animation with keyframes not working
问题描述
我有一个非常基本的 HTML 片段，目标是从 display: none; 到 display: block 动画，不透明度从 0 变为 1.
我正在使用 Chrome 浏览器，它使用 -webkit 前缀作为首选项，并设置了 -webkit-keyframes 过渡集以使动画成为可能.但是，它不起作用，只是改变了 display 而不会褪色.
我有一个 JSFiddle 这里.
<头><style type="text/css">#myDiv{显示:无；不透明度:0；填充:5px；颜色:#600；背景颜色:#CEC；-webkit-transition: 350ms display-none-transition;}#parent:hover>#myDiv{不透明度:1；显示:块；}#父母{背景色:#000；颜色:#FFF；宽度:500px；高度:500px；填充:5px；}@-webkit-keyframes display-none-transition{0% {显示:无；不透明度:0；}1%{显示:块；不透明度:0；}100%{显示:块；不透明度:1；}}</风格><身体><div id="父">悬停在我身上...<div id="myDiv">你好！</html>
如果你正在使用 @keyframes 你应该使用 -webkit-animation 而不是 -webkit-transition.这是 @keyframes 动画的文档:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
见下面的代码片段:
.parent {背景色:#000；颜色:#fff;宽度:500px；高度:500px；填充:5px；}.myDiv {显示:无；不透明度:0；填充:5px；颜色:#600；背景颜色:#cec；}.parent:hover .myDiv {显示:块；不透明度:1；/* "both" 告诉浏览器使用上面的不透明度在动画结束时(最佳实践)*/-webkit-animation: display-none-transition 1s 两者；动画:display-none-transition 1s 两者；}@-webkit-keyframes display-none-transition {0% {不透明度:0；}}@keyframes display-none-transition {0% {不透明度:0；}}悬停在我身上...<div class="myDiv">你好！</div>2016 年更新的答案
为了反映当今的最佳实践，我将使用过渡而不是动画.这是更新后的代码:
.parent {背景色:#000；颜色:#fff;宽度:500px；高度:500px；填充:5px；}.myDiv {不透明度:0；填充:5px；颜色:#600；背景颜色:#cec；-webkit-transition: 不透明度 1s；过渡:不透明度1s；}.parent:hover .myDiv {不透明度:1；}悬停在我身上...<div class="myDiv">你好！</div>I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.
I'm using 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.
<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屋！
