@keyframes rainbow {
    0% {
        color: rgb(255, 0, 0)
    }
    33% {
        color: rgb(255, 255, 255)
    }
    66% {
        color: rgb(255, 0, 0)
    }
    100% {
        color: rgb(255, 255, 255)
    }
}

.animation1 {
    animation: rainbow 5s linear infinite alternate;
}


/* -----------------------------------------------------------
Blink for Webkit and others
(Chrome, Safari, Firefox, IE, ...)
-----------------------------------------------------------*/

@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}

.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}


/*-------------------------------------------------------
  Titre fondu entrant
  --------------------------------------------------------*/

#titreanime {
    /*width: 100px;
  height: 100px;
  background: red;*/
    position: relative;
    animation-name: example;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

@keyframes example {
    from {
        /*top: 200px;*/
        color: grey;
        font-size: 1px;
    }
    to {
        /*top: 0px;*/
        color: #69003F;
        font-size: auto;
    }
}


/* -----------------------------------------------------------
Blink for Webkit and others
(Chrome, Safari, Firefox, IE, ...)
-----------------------------------------------------------*/

@-webkit-keyframes blinker2 {
    from {
        color: grey;
    }
    to {
        color: #f8c4ff;
    }
}

.blink2 {
    text-decoration: blink;
    -webkit-animation-name: blinker2;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}



@keyframes wheelHueColor {
    from, to { background-color: hsl(324, 70%, 45%); }
    10%      { background-color: hsl(360, 65%, 45%); }
    20%      { background-color: hsl( 36, 80%, 45%); }
    30%      { background-color: hsl( 72, 75%, 35%); }
    40%      { background-color: hsl(108, 65%, 35%); }
    50%      { background-color: hsl(144, 75%, 35%); }
    60%      { background-color: hsl(180, 75%, 35%); }
    70%      { background-color: hsl(216, 60%, 45%); }
    80%      { background-color: hsl(252, 65%, 50%); }
    90%      { background-color: hsl(288, 60%, 40%); }
}

.animecouleurs {
    background-color: hsl(324, 70%, 45%);
    animation: wheelHueColor 100s infinite;
}


@keyframes wheelHueColor2 {
    from, to { box-shadow: 0 0 10px 1px hsl(324, 70%, 45%); }
    10%      { box-shadow: 0 0 10px 1px hsl(360, 65%, 45%); }
    20%      { box-shadow: 0 0 10px 1px hsl( 36, 80%, 45%); }
    30%      { box-shadow: 0 0 10px 1px hsl( 72, 75%, 35%); }
    40%      { box-shadow: 0 0 10px 1px hsl(108, 65%, 35%); }
    50%      { box-shadow: 0 0 10px 1px hsl(144, 75%, 35%); }
    60%      { box-shadow: 0 0 10px 1px hsl(180, 75%, 35%); }
    70%      { box-shadow: 0 0 10px 1px hsl(216, 60%, 45%); }
    80%      { box-shadow: 0 0 10px 1px hsl(252, 65%, 50%); }
    90%      { box-shadow: 0 0 10px 1px hsl(288, 60%, 40%); }
}

#anime {
    box-shadow: 0 0 10px 1px hsl(324, 70%, 45%);
    animation: wheelHueColor2 100s infinite;
}