Nhấn
CTRL + SPACE
để xem gợi ý code
Xem kết quả
Tạo chuyển động animation trong CSS3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Học CSS3 toidicode.com</title> </head> <style type="text/css" media="screen"> @keyframes move{ from{ top: 0px;} to{ top: 200px;} } p{ animation-name: move; animation-duration: 3s; animation-direction: normal; animation-iteration-count: infinite; animation-timing-function: ease-in-out; position: relative; width: 100px; height: 100px; padding: 10px; background-color: orange; } </style> <body> <div> Chọn kiểu thực thi animation <br/> <input type="radio" value="linear" name="timing-function" onclick="changeAnimation(this)"> linear <input type="radio" value="ease" name="timing-function" onclick="changeAnimation(this)" > ease <input type="radio" value="ease-in" name="timing-function" onclick="changeAnimation(this)" > ease-in <input type="radio" value="ease-out" name="timing-function" onclick="changeAnimation(this)" > ease-out <input type="radio" value="ease-in-out" name="timing-function" onclick="changeAnimation(this)" checked="" > ease-in-out </div> <p id="result">Học CSS3 miễn phí toidicode.com</p> <script> function changeAnimation(element) { var value = element.value; document.getElementsByTagName('p')[0].style.animationTimingFunction = value; } </script> </body> </html>
