Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di neo1976
    Registrato dal
    Mar 2015
    Messaggi
    326

    Animazione in css parte subito

    Buongiorno a tutti, ho inserito una animazione in css che sposta un div da destra verso il centro della pagina, il problema è che l'animazione è in fondo alla pagina e partendo subito non si visualizza.
    Come faccio a farla partire solo quando si visualizza quella porzione di schermo?


    codice HTML:
    .fadeInRight {  -webkit-animation-name: fadeInRight;  animation-name: fadeInRight;  -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;  }  @-webkit-keyframes fadeInRight {  0% {  opacity: 0;  -webkit-transform: translate3d(100%, 0, 0);  transform: translate3d(100%, 0, 0);  }  100% {  opacity: 1;  -webkit-transform: none;  transform: none;  }  }  @keyframes fadeInRight {  0% {  opacity: 0;  -webkit-transform: translate3d(100%, 0, 0);  transform: translate3d(100%, 0, 0);  }  100% {  opacity: 1;  -webkit-transform: none;  transform: none;  }  }

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,930
    Ciao, in linea di massima non può essere risolto col solo CSS, ci vorrebbe un po' di JavaScript per gestire l'evento scroll in modo da applicare il CSS al momento opportuno.

    Qui qualche tutorial:
    How to trigger a CSS animation on scroll
    How to Animate on Scroll With Vanilla JavaScript
    Scroll animations
    Styling Based on Scroll Position
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  3. #3
    Utente di HTML.it L'avatar di neo1976
    Registrato dal
    Mar 2015
    Messaggi
    326
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, in linea di massima non può essere risolto col solo CSS, ci vorrebbe un po' di JavaScript per gestire l'evento scroll in modo da applicare il CSS al momento opportuno.

    Qui qualche tutorial:
    How to trigger a CSS animation on scroll
    How to Animate on Scroll With Vanilla JavaScript
    Scroll animations
    Styling Based on Scroll Position
    Grazie! buon proseguo di giornata

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.