Giá trị paused của thuộc tính animation-play-state trong CSS

Giá trị paused của thuộc tính animation-play-state trong CSS

Giá trị paused của thuộc tính animation-play-state trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Giá trị paused của thuộc tính animation-play-state trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#chayngang {
    width: 200px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang; /* Áp dụng animation có tên "chayngang" */
    animation-duration: 4s; /* Thời gian diễn ra animation là 4s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/ 
}
#chayngang2 {
    width: 200px;
    height: 50px;
    margin-bottom:10px;
    line-height:50px;
    text-align:center;
    background: red;
    position: relative;
    animation-name: chayngang2; /* Áp dụng animation có tên "chayngang2" */
    animation-duration: 4s; /* Thời gian diễn ra animation là 4s*/
    animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/  
    
}
#chayngang:hover{animation-play-state: paused; /*Dừng animation */}
#chayngang2:hover{animation-play-state: paused; /*Dừng animation */}
@keyframes chayngang{
  from {left: 0px;}
  to {left: 200px;}	
}
@keyframes chayngang2{
  0% {left: 0px;}
  100% {left: 200px;}	
}
</style>
</head>
<body>

<h1>Giá trị paused của thuộc tính animation-play-state trong CSS</h1>

<p>Dùng để dừng một animation đang chạy, Rê chuột vào nút để dừng animation:</p>

<div id="chayngang">animation-play-state: paused;</div>

<div id="chayngang2">animation-play-state: paused;</div>

</body>
</html>
Giá trị paused của thuộc tính animation-play-state trong CSS nằm trong bài viết Thuộc tính animation-play-state trong CSS