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屋!