Demo tạo chuyển động animation trong CSS3 Live code

<!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 số lần thực thi animation
        <br/>
        <input type="radio" value="2" name="count" onclick="changeAnimation(this)" > 2
        <input type="radio" value="4" name="count" onclick="changeAnimation(this)"> 4
        <input type="radio" value="infinite" name="count" onclick="changeAnimation(this)" checked="" > infinite
    </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.animationIterationCount = value;                
        }
    </script>
</body>
</html>