webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau/css/animations.css

/* ---------------Animationen Startseite----------------- */
:root {
    --width1: calc(100% - 100px);
    --width2: 0px;
    --width3: calc(100% - 200px);
}

/* ---------------Beispiel auf der Startseite--------------*/
#beispiel {
    background-color: aqua;
    color: black;
    border: 3px solid rgb(255, 0, 0);
    border-radius: 0.4em;
    animation-timing-function: ease;
    width: 100px;
    height: 100px;
    animation-name: beispiel;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    text-align: center;
    align-self: end;
    position: relative;
}

@keyframes beispiel {
    0% {
        transform: rotate(0deg);
        left: var(--width2);
    }

    25% {
        transform: rotate(90deg);
        left: var(--width2);
        background-color: blue;
        border-color: orange;

    }

    50% {
        transform: scale(1.5);
        background-color: blueviolet;
        border-color: green;
        transform: rotate(180deg);
        left: var(--width1);

    }

    75% {
        transform: rotate(270deg);
        left: var(--width1);
        background-color: red;
        border-color: lightblue;
    }

    100% {
        background-color: yellow;
        border-color: pink;
        transform: rotate(360deg);
        left: var(--width2);
    }

}

/* -----------------Animationen Beispiele--------------------------- */
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
#stempel1 {
    color: red;
    border: 2px solid red;
    padding: 10px;
    width: 120px;
    text-align: center;
    font-size: 25px;
    position: relative;
    animation-name: stempel1;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes stempel1 {
    0% {
        transform: scale(1) rotate(10deg)
    }

    50% {
        transform: scale(1.5) rotate(30deg);
    }

    100% {
        transform: scale(1) rotate(10deg)
    }
}

/* ---------------Beispiel 1 für die animation duration--------------- */
#beispiel6 {
    color: red;
    border: 2px solid yellow;
    padding: 10px;
    width: 100px;
    height: px;
    text-align: center;
    font-size: 25px;
    position: relative;
    animation-name: beispiel6;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes beispiel6 {
    0% {
        transform: scale(1);
        left: var(--width2);
    }

    50% {
        transform: scale(1.5);
        left: var(--width3);
    }

    100% {
        transform: scale(1);
        left: var(--width2);
    }
}

/* ---------------Beispiel 1 für die animation duration ---------------*/
#beispiel7 {
    color: red;
    border: 2px solid yellow;
    padding: 10px;
    width: 100px;
    height: px;
    text-align: center;
    font-size: 25px;
    position: relative;
    animation-name: beispiel7;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes beispiel7 {
    0% {
        transform: scale(1);
        left: var(--width2);
    }

    50% {
        transform: scale(1.5);
        left: var(--width3);
    }

    100% {
        transform: scale(1);
        left: var(--width2);
    }
}

/*--------------- Beispiel 1 für die animation direction ---------------*/
#beispiel4 {
    color: red;
    border: 2px solid yellow;
    border-radius: 0.4em;
    padding: 10px;
    width: 100px;
    height: px;
    text-align: center;
    font-size: 25px;
    position: relative;
    animation-name: beispiel4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes beispiel4 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg)
    }
}

/*--------------- Beispiel 2 für die animation direction ---------------*/
#beispiel5 {
    color: red;
    border: 2px solid yellow;
    border-radius: 0.4em;
    padding: 10px;
    width: 100px;
    text-align: center;
    font-size: 25px;
    position: relative;
    animation-name: beispiel5;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes beispiel5 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg)
    }
}


/*--------------- Beispiel 1 für die animation timing funktion ---------------*/
#beispiel1 {
    color: red;
    border: 2px solid yellow;
    padding: 10px;
    width: 100px;
    text-align: center;
    font-size: 25px;
    position: relative;
    animation-name: beispiel1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes beispiel1 {
    0% {
        transform: scale(1);
        left: var(--width2);
    }

    50% {
        transform: scale(1.5);
        left: var(--width3);
    }

    100% {
        transform: scale(1);
        left: var(--width2);
    }
}

/*--------------- Beispiel 2 für die animation timing funktion ---------------*/
#beispiel2 {
    color: red;
    border: 2px solid yellow;
    padding: 10px;
    width: 100px;
    text-align: center;
    font-size: 25px;
    position: relative;
    animation-name: beispiel2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@keyframes beispiel2 {
    0% {
        transform: scale(1);
        left: var(--width2);
    }

    50% {
        transform: scale(1.5);
        left: var(--width3);
    }

    100% {
        transform: scale(1);
        left: var(--width2);
    }
}