webkit-transition在Chrome中不起作用
问题描述:
我是新的CSS动画。当我将鼠标悬停在块上时,我正在进行转换。但是当我徘徊在它上面时,没有任何反应webkit-transition在Chrome中不起作用
<!--HTML-->
<div class="pageTwo">
<div class="block-works">
<p class="work">We at Good Tree production watch movies at full time.Watching movies at 24 X 7 is our duties and reviewing them is our homework </p>
</div>
</div>
CSS:
.block-works{
position:absolute;
background-color: black;
opacity: 0.8;
padding-right: auto;
display:block;
width:90%;
margin-top: 100px;
margin-bottom:100px;
margin-left: 5%;
margin-right: 5%;
border-radius: 7px;
height: 200px;
-webkit-transition: width 2s;
transition: width 2s
}
.blockworks:hover{
width:90%;
transition-delay: 0.6s;
}
答
检查这个代码希望它帮助。
#HTML
<div class="pageTwo">
<div class="block-works">
<p class="work">We at Good Tree production watch movies at full time.Watching movies at 24 X 7 is our duties and reviewing them is our homework </p>
</div>
</div>
#CSS
.block-works{
position:relative;
background-color: black;
opacity: 0.8;
padding-right: auto;
display:block;
width:90%;
margin-top: 100px;
margin-bottom:100px;
margin-left: 5%;
margin-right: 5%;
border-radius: 7px;
height: 200px;
-webkit-transition: width 2s;
transition: width 2s
}
.block-works:hover{
width:100px;
transition-delay: 0.6s;
}
+0
https://jsfiddle.net/hqa57pux/工作代码 –
答
我评论了我在CSS代码段已经改变
.block-works{
position:absolute;
background-color: black;
opacity: 0.8;
padding-right: auto;
display:block;
width:40%; /* initial width changed to show animation */
margin-top: 100px;
margin-bottom:100px;
margin-left: 5%;
margin-right: 5%;
border-radius: 7px;
height: 200px;
transition: width 2s
}
.block-works:hover{ /* name of class changed */
width:90%;
transition-delay: 0.6s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!--HTML-->
<div class="pageTwo">
<div class="block-works">
<p class="work">We at Good Tree production watch movies at full time.Watching movies at 24 X 7 is our duties and reviewing them is our homework </p>
</div>
</div>
</body>
</html>
我相信你'.blockworks:hover'选择实际上应该写成'.blockworks:悬停“中间有一道短跑。 –