ms · Units · CSS

The ms CSS unit specifies the time of the element in milliseconds.

1ms = 1/1000s

Syntax

<number>ms

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes
        {
            0%
            {
                margin-left: 0;
            }
            100%
            {
                margin-left: 200px;
            }
        }
        p
        {
            animation-duration: 4000ms;
            animation-iteration-count: infinite;
            animation-name: mykeyframes;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">0ms</button>
    <button onmouseover="myfunction(innerHTML)">2000ms</button>
    <button onmouseover="myfunction(innerHTML)">4000ms</button>
    <button onmouseover="myfunction(innerHTML)">8000ms</button>
    <button onmouseover="myfunction(innerHTML)">16000ms</button>
    <p>ms</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.animationDuration = myparameter;
        }
    </script>
</body>
</html>

3 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes
        {
            0%
            {
                margin-left: 0;
            }
            100%
            {
                margin-left: 200px;
            }
        }
        p
        {
            animation-duration: 4000ms;
            animation-iteration-count: infinite;
            animation-name: mykeyframes;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>0ms</button>
    <button>2000ms</button>
    <button>4000ms</button>
    <button>8000ms</button>
    <button>16000ms</button>
    <p>ms</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.animationDuration = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
        }
    </script>
</body>
</html>

ms

Syntax

Examples

1 · CSS

2 · JS · Inline

3 · JS · Internal

Links

Units

External