lunedì 28 Settembre 2020

Download in corso

Softwareone.it

06-01-2019

La regola @keyframes specifica il codice di animazione

La regola @keyframes specifica il codice di animazione.

Pubblicità

floating

Il cambiamento di stile viene specificato in percentuale o con “from” and “to” che è la stessa come 0% e 100%.

0% è l’inizio dell’animazione, 100% è quando l’animazione è completa.

Esempio

@keyframes floating {
    0%   { transform: translateY(0%); }
    50%  { transform: translateY(8%); } 
    100% { transform: translateY(0%); }         
}
 
@-webkit-keyframes floating {
    0%   { -webkit-transform: translateY(0%); }
    50%  { -webkit-transform: translateY(8%); } 
    100% { -webkit-transform: translateY(0%); }         
}
.floating{
    width:150px; height:150px; background: #369;
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

Il primo keyframes su 0% definisce la posizione iniziale; al 50% dell’esecuzione dell’animazione impostare un keyframes a 8%; e al 100% un keyframe a 0% che ritorna alla posizione iniziale.

La proprietà transform permette di ruotare, scalare e inclinare gli elementi.

Il metodo translateY indicare l’asse su cui ci vogliamo spostare Y / X

Creare un contenitore di 150 x 150 e impostiamo la proprietà animation-name, specificare un nome per l’animazione @keyframes; impostare la durata dell’animazione è specifichiamo quante volte deve essere ripetuta l’animazione con animation-iteration-count.

Specificare sempre la durata dell’animazione altrimenti la durata è pari a 0.

Animazioni in keyframes.

ExpandUp

.expandUp{
    width:150px; height:150px; background: #660;
    animation-name: expandUp;
    -webkit-animation-name: expandUp;   
    animation-duration: 0.9s;   
    -webkit-animation-duration: 0.9s;
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;        
    visibility: visible !important; 
}
 
@keyframes expandUp {
    0% {transform: translateY(100%) scale(0.6) scaleY(0.5);}
    60%{transform: translateY(-7%) scaleY(1.12);}
    75%{transform: translateY(3%);} 
    100% {transform: translateY(0%) scale(1) scaleY(1);}    
}
 
@-webkit-keyframes expandUp {
    0% {-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);}
    60%{-webkit-transform: translateY(-7%) scaleY(1.12);}
    75%{-webkit-transform: translateY(3%);} 
    100% {-webkit-transform: translateY(0%) scale(1) scaleY(1);}    
}

BigEntrance

.bigEntrance{
    width:150px; height:150px; background: #933;
    animation-name: bigEntrance;
    -webkit-animation-name: bigEntrance;    
    animation-duration: 2.9s;   
    -webkit-animation-duration: 2.9s;
    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    
    visibility: visible !important;         
}
 
@keyframes bigEntrance {
    0% {transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity: 0.2;}
    30% {transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);       opacity: 1;}
    45% {transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}
    60% {transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);        opacity: 1;}    
    75% {transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}
    90% {transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);     opacity: 1;}    
    100% {transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}       
}
 
@-webkit-keyframes bigEntrance {
0% {-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity: 0.2;}
30% {-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);       opacity: 1;}
45% {-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}
60% {-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);        opacity: 1;}    
75% {-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}
90% {-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);     opacity: 1;}    
100% {-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}               
}

Lo script che attiva le animazioni.

<script type="text/javascript">
function bigEntrance()
            {
                var elm = document.getElementById('bigEntrance');
                elm.style.animation='bigEntrance 2s ease-out';
                var newone = elm.cloneNode(true);
                elm.parentNode.replaceChild(newone, elm);
            }
</script>

assegnare un id univoco ad ogni animazione.

<div class="bigEntrance" id="bigEntrance">
<button onclick="bigEntrance()">bigEntrance</button>
</div>

Vedi tutte le animazioni

Scarica tutte le Animazioni

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Lascia un commento

Pubblicità