Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Animazioni CSS e tag hover

    Salve, studio programmazione a scuola e abbiamo da poco iniziato l'HTML5 e CSS3.
    Io volevo creare un <div> che quando il mouse ci andava sopra (usando div:hover) partiva un'animazione che spostava lo stesso div di 60px verso sinistra. Fin qui tutto bene, va. Il problema è che io vorrei fare in modo che finché il mouse è sopra il div, il div rimane spostato (di 60px verso sinistra), poi quando il mouse se ne va, il div ritorni in posizione originale, con un animazione fluida (uguale all'inversa di quella di partenza). Spero di essermi spiegato..

    Per le animazioni ho usato:
    codice:
    @keyframes move{
        0%{top:200px; left:200px;}
        100%{top:200px; left:140px;}
    }
    #div:hover{animation: move 2s}
    Ultima modifica di KillerWorm; 18-11-2017 a 16:32

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao e benvenuto, credo che in questo caso sia meglio utilizzare una semplice transition.

    Forse a scuola avete visto che esistono due principali sistemi per creare delle animazioni CSS; uno è quello che stai utilizzando, con animation e @keyframe, ed è un sistema che si basa sul concetto di timeline; l'altro invece vede l'uso della proprietà transition, che crea un'animazione basata semplicemente sulle proprietà definite tra due selettori (i quali definiscono due stati di un oggetto, ad esempio lo stato normale e hover), e chiaramente sull'impostazione della durata e delle altre proprietà che definiscono la transizione (analogamente ad animation).

    Se puoi usare transition al posto di animation, fai magari qualche prova. Dovrai semplicemente definire i valori iniziali di top e left per lo stato normale di #div, mentre quelli finali per lo stato :hover.

    Ovviamente se hai altre particolari necessità (sul tema in oggetto) puoi sempre chiedere in questa discussione.

    Per altre informazioni riguardo l'argomento, consiglio di dare uno sguardo al capitolo 8 dei link utili CSS (discussione in evidenza), sotto la voce "Animazioni".



    [Mod]
    Quando posti del codice sul forum è opportuno utilizzare gli appositi tag di formattazione (vedi regolamento di sezione tra le discussioni in evidenza). Per questa volta ho provveduto io. Sull'editor messaggi è presente il pulsantino col cancelletto [#] che permette di inserire al volo tali tag; ti invito a farne uso le eventuali prossime volte. Grazie.

    Buon proseguimento.
    Ultima modifica di KillerWorm; 18-11-2017 a 17:51
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Ciao,

    I Keyframes sono una gran cosa, ma non bisogna abusarne! Prima di tutto è importante capire bene come funzionano e per questo ti consiglio questa guida sui Keyframes.

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 © 2024 vBulletin Solutions, Inc. All rights reserved.