Animācija

<!DOCTYPE html>
<html>
<head>
<style>
#zobrats
{
    width: 250px;
    animation: zobratspalabi 5s linear infinite;
}
@keyframes zobratspalabi
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
#zobrats2
{
    width: 250px;
    animation: zobratspakreisi 5s linear infinite;
    position: relative;
    left: -25px;
}
@keyframes zobratspakreisi
{
    0%
    {
        transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}
#zvans
{
    width: 250px;
}
#zvans:hover
{
    animation: zvanskustas 1.3s linear infinite;    
}
@keyframes zvanskustas
{
    0%
    {
        transform: rotate(0deg);
    }
    25%
    {
        transform: rotate(-25deg);
    }
    50%
    {
        transform: rotate(0deg);
    }
    75%
    {
        transform: rotate(25deg);
    }    
}
</style>
</head>
<body>

<img id='zobrats' src="https://www.ambex.lv/bildes/zobrats.png">
<img id='zobrats2' src="https://www.ambex.lv/bildes/zobrats.png">
<img id='zvans' src="https://www.ambex.lv/bildes/zvans.png"
</body>
</html>
Editor is loading...