محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
		<style>
.container {
    border: 1px dashed #ccc;
    font-family: arial;
}

h1 {
    font-size: 16px;
    padding: 10px;
    font-weight: normal;
    text-align: center;
}

h2 {
    font-size: 15px;
    font-weight: normal;
    margin: 0;
    float: left;
    width: 100px;
    line-height: 30px;
}

.row {
    padding: 10px 20px;
}

@keyframes example {
    from {
        left: 100px;
    }
    to {
        left: calc(100% - 50px);
    }
}

.circle {
    position: relative;
    left: 100px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-name: example;
    animation-duration: 2s;
}

.linear {
    background: #ED796D;
    animation-timing-function: linear;
}

.ease {
    background: #ED976D;
    animation-timing-function: ease;
}

.ease-in {
    background: #2ECC71;
    animation-timing-function: ease-in;
}

.ease-out {
    background: #3498DB;
    animation-timing-function: ease-out;
}

.ease-in-out {
    background: #1ABC9C;
    animation-timing-function: ease-in-out;
}

.cubic-bezier {
    background: #0A8EA0;
    animation-timing-function: cubic-bezier(0.1, 0.5, 1, 0.1);
}

.steps-start {
    background: #777;
    animation-timing-function: steps(5, start);
}

.steps-end {
    background: #777;
    animation-timing-function: steps(5, end);
}
		</style>
	</head>
	<body>
        <div class="container">
            <h1>Animation timing functions speed</h1>
            <div class="row">
                <h2>linear</h2>
                <div class="circle linear"></div>
            </div>
            <div class="row">
                <h2>ease</h2>
                <div class="circle ease"></div>
            </div>
            <div class="row">
                <h2>ease-in</h2>
                <div class="circle ease-in"></div>
            </div>
            <div class="row">
                <h2>ease-out</h2>
                <div class="circle ease-out"></div>
            </div>
            <div class="row">
                <h2>ease-in-out</h2>
                <div class="circle ease-in-out"></div>
            </div>
            <div class="row">
                <h2>cubic-bezier</h2>
                <div class="circle cubic-bezier"></div>
            </div>
            <div class="row">
                <h2>steps(5, start)</h2>
                <div class="circle steps-start"></div>
            </div>
            <div class="row">
                <h2>steps(5, end)</h2>
                <div class="circle steps-end"></div>
            </div>
        </div>
    </body>
</html>