---
# System prepended metadata

title: CSS animation

---

## CSS animation
### Vaja1
```css=
body{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #222;
}

a{
    position: relative;
    color: #f6b93b;
    font-family: "Poetsen One", sans-serif;
    text-decoration: none;
    font-size: 25px;
    border: 3px solid;
    padding: 25px 60px;
    letter-spacing: 10px;
    overflow: hidden;
}

a:hover::before,a span:hover::before,a:hover::after,a span:hover::after{
    top: 0%;
}


a::before{
    position: absolute;
    content: '';
    background-color: #f6b93b;
    width: 25%;
    height: 100%;
    top: 100%;
    left: 0%;
    transition: .1s all;
}

a span::before{
    position: absolute;
    content: '';
    background-color: #f6b93b;
    width: 25%;
    height: 100%;
    top: -100%;
    left: 25%;
    transition: .1s all;
    transition-delay: .1s;
}

a span::after{
    position: absolute;
    content: '';
    background-color: #f6b93b;
    width: 25%;
    height: 100%;
    top: 100%;
    right: 25%;
    transition: .1s all;
    transition-delay: .2s;
}
a::after{
    position: absolute;
    content: '';
    background-color: #f6b93b;
    width: 25%;
    height: 100%;
    top: -100%;
    right: 0%;
    transition: .1s all;
    transition-delay: .3s;
}
```
```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap" rel="stylesheet">
</head>
<body>
    <a href="#"><span class="">Knof</span></a>
</body>
</html>
```

### Vaja2
#### CSS - style
```css=
body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    font-family: "Poetsen One", sans-serif;
}
.container{
    position: relative;
    width: 500px;
    height: 500px;
    overflow: hidden;
}
.container img{
    width: 100%;
    transition: .5s all;
}
.container:hover img{
    transform: translateY(-30%) scale(1.3) rotate(13deg);
}

.caption{
    position: absolute;
    width: 100%;
    height: 30%;
    bottom: 0;
    left: 0;
    background-color: gray;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    transition: all .5s;
}
.container:hover .caption{
    transform: translateY(0);
}
```
#### CSS - style1
```css=
body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    font-family: "Poetsen One", sans-serif;
}
.container{
    position: relative;
    width: 500px;
    height: 500px;
    overflow: hidden;
}
.container img{
    width: 100%;
    transition: .5s all;
}

.container:hover img{
    transform: scale(1.3) rotate(15deg);
}

.caption{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: gray;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .5s;
    opacity: 0;
}

.container:hover .caption{
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

.caption a{
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    background-color: red;
    border: 3px solid red;
    padding: 10px;
    border-radius: .5rem;
}
.caption h1{
    transform: translateY(-500px);
    transition: all .5s;
}
.container:hover .caption h1{
    transform: translateY(0);
}

.caption p{
    transform: scale(10) rotate(360deg);
    transition: all .5s;
}
.container:hover .caption p{
    transform: scale(1);
}
```
#### HTML
```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style1.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <img src="pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg" alt="avto">
        <div class="caption">
            <h1>Španija</h1>
            <p>Gremo v Španijo na maturantski izlet ali pa tudi ne.</p>
            <p>24.2.2024 - Manchester United 1 : 2 Fulham F.C.</p>
            <p>Stadium - Old Trafford</p>
            <p>ManU -<br>&nbsp;&nbsp; 89' H. Maguire <br> Ful -<br> &nbsp;&nbsp;65' C. Bessay ,<br>&nbsp;&nbsp; 90 + 7' A. Iwobi</p>
            <a href="https://www.fulhamfc.com/">Prava smer ...</a>
        </div>
    </div>
</body>
</html> 
```
### vaja3
#### css
```css=
body{
    padding: 0;
    margin: 0;
}

div{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: tmtotm 5s infinite;
}
@keyframes tmtotm {
    0%{
        transform: translate(0,0);
    }
    30%{
        transform: translate(400px,0) rotate(180deg);
         background-color: blue;
         border-radius: 5rem;
        }
    60%{
        transform: translate(400px,300px) rotate(180deg);
        background-color: green;
        border-radius: 0rem;
    }
    75%{
        transform: translate(0,300px);
        background-color: violet;
        border-radius: 5rem;
    }
    100%{
        transform: translate(0,0);
        background-color: yellow;
    }
    
}
```
#### html
```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div></div>
</body>
</html>
```
### vaja4
#### css
```css=
body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background-color: aquamarine;
}

h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-align: center;
    text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 5px;
    animation: rotation 5s infinite alternate;
}

@keyframes rotation {
    from {
        transform: rotate(15deg);
    }
    to {
        transform: rotate(-15deg);
    }
}
```
#### html 
```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Gremo na <br>morje</h2>
</body>
</html>
```
### vaja5
#### css
```css=
body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.cointainer{
    position: relative;
    width: 800px;
    height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.rac{
    position: absolute;
    top: 35%;
    left: 65%;
    animation: rot 2s infinite alternate linear;
}

.vojak{
    position: absolute;
    left: 10%;
    top: 10%;
    filter: drop-shadow(black 1rem 1rem 10px);

}
.vojak2{
    position: absolute;
    top: 10%;
    filter: drop-shadow(black 1rem 1rem 10px);

}
.caption{
    position: absolute;
    left: 37%;
    text-align: center;
    font-size: 2em;

}
.meglica{
    position: absolute;
    top: 32%;
    z-index: 1;
}

a{
    position: absolute;
    left: 45%;
    top: 75%;
    font-size: 18px;
    border: 3px solid yellowgreen;
    background-color: green;
    border-radius: 1rem;
    padding: 10px 15px;
    text-decoration: none;
    z-index: 3;
}
a::before{
    position: absolute;
    width: 50%;
    height: 100%;
    left: -50%;
}
p span:nth-child(1){color: orange;}
p span:nth-child(3){color: red;}
p span:nth-child(5){color: #fff;}
@keyframes rot {
    from{transform: rotate(5deg);}
    to{transform: rotate(-5deg);}
}
```
#### html
```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="cointainer">
        <div class="caption">
            <p>
               <span>Naš nasvet,</span> <br><span>zaščitite</span> <br><span>svoj računalnik.</span>
            </p>
        </div>
        <a href="#">Več ...</a>
        <div class="nebo"><img src="nebo.jpg" alt=""></div>
        <div class="meglica"><img src="meglica.png" alt=""></div>
        <div class="rac"><img src="prenosnik-(1).png" alt=""></div>
        <div class="vojak"><img src="Vojak1.png" alt=""></div>
        <div class="vojak2"><img src="Vojak2.png" alt=""></div>
    </div>
</body>
</html>
```