如果您正在使用
@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; -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 > Hover on me... <div >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 > Hover on me... <div >Hello!</div></div>
