Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
Cấu trúc@keyframes tênAnimation { giá trị { css } } @-moz-keyframes tênAnimation { giá trị { css } } @-webkit-keyframes tênAnimation { giá trị { css } }
HTML viết:
CSS viết:p { position: relative; width: 130px; animation: aniName 10s infinite; -moz-animation: aniName 10s infinite; -webkit-animation: aniName 10s infinite; -o-animation: aniName 10s infinite; } @keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-moz-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-webkit-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-o-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } }
Xem thêm
Cấu trúc@keyframes tênAnimation { giá trị { css } } @-moz-keyframes tênAnimation { giá trị { css } } @-webkit-keyframes tênAnimation { giá trị { css } }
![](https://1.bp.blogspot.com/-pudY7iV-4AM/YNygVhHd6tI/AAAAAAAAALk/ZxegOXVIKpwRwgBjMoR1PR3n-JJ9fzQWACLcBGAsYHQ/s600/keyframes-trong-css.png)
HTML viết:
CSS viết:p { position: relative; width: 130px; animation: aniName 10s infinite; -moz-animation: aniName 10s infinite; -webkit-animation: aniName 10s infinite; -o-animation: aniName 10s infinite; } @keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-moz-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-webkit-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-o-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } }
Đăng nhận xét