简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Conserver l'animation CSS dans son état final à la fin
P粉950128819
P粉950128819 2023-08-20 18:36:55
0
2
568

J'anime certains éléments définis sur opacity: 0; Une classe d'animation est appliquée à l'événement onClick, à l'aide d'images clés, qui modifie l'opacité de 0 à 1 (et quelques autres modifications).

Malheureusement, lorsque l'animation se termine, l'élément revient à un état opacité : 0 (dans Firefox et Chrome). Mon instinct est que les éléments animés resteront dans leur état final, annulant leurs propriétés d'origine. N'est-ce pas vrai ? Si non, comment puis-je conserver l’élément dans son état final ?

Code (hors versions de préfixe) : 

@keyframes bulle { 0% { transformation:échelle(0,5); opacité:0,0 } 50 % { transformation : échelle (1,2); opacité : 0,5 ; 100 % { transformation : échelle (1.0); opacité : 1.0 ; }
P粉950128819
P粉950128819

répondre à tous (2)
P粉239089443
P粉2390894432023-08-21 17:16:38 2 plancher

Si vous utilisez plus de propriétés d'animation, vous pouvez utilisershorthand:

animation: bubble 2s linear 0.5s 1 normal forwards;

Réglez-le comme ceci :

  • bubbleNom de l'animation
  • 2sDurée
  • linearFonction heure
  • 0.5sRetard
  • 1迭代次数（可以是 'infinite')
  • normaldirection
  • forwardsmode de remplissage (réglé sur « en arrière » si vous souhaitez une compatibilité avec l'utilisation de la position finale comme état final [c'est pour prendre en charge les navigateurs avec les animations désactivées] {juste pour répondre au titre, pas à votre cas spécifique})

Fonctions horaires disponibles :

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

Itinéraires disponibles :

normal | reverse | alternate | alternate-reverse
Comme+0
Ajouter une réponse
    P粉564301782
    P粉5643017822023-08-21 15:00:10 1 plancher

    Essayez d'ajouteranimation-fill-mode: forwards;. Par exemple, vous pouvez utiliser des abréviations comme celle-ci :

    animation: bubble 1.0s forwards;

    https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

    Comme+0
    Ajouter une réponse
      Sujets populaires
      Plus>
      Articles populaires
      Tutoriels populaires
      Plus>
      Tutoriels associés
      Recommandations populaires
      Derniers cours
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！