Chromeでwebkit-transitionが動作しない

私は新しいCSSアニメーションです。私はそれを上に置くとブロック上でトランジションを行っています。しかし私がそれに乗るとき何も起こらない。Chromeでwebkit-transitionが動作しない

<!--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; 
}

出典

2017-02-11 Vijay Vj

を変更したものをコメントしている：ホバー：hover'セレクタは、実際には' .blockworksを記述する必要があります間にダッシュを入れてください。 –

このコードをチェックし、それが役に立てば幸い。

#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; 
    }

出典

2017-02-11 06:13:30

https://jsfiddle.net/hqa57pux/作業コード –

私は私はあなた `.blockworksを信じて、私は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>

出典

2017-02-11 06:19:27

Chromeでwebkit-transitionが動作しない

答えて

関連する問題