Maison > Article > interface Web > À propos de l'animation CSS3 pour obtenir un effet d'animation image par image

À propos de l'animation CSS3 pour obtenir un effet d'animation image par image

不言original: 2018-06-20 17:19:314586parcourir

Cet article présente principalement l'animation CSS3 pour obtenir un effet d'animation image par image, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'attribut d'animation en CSS3 est très puissant, mais vous pouvez l'utiliser. c'est moi-même Relativement peu nombreux, on m'a posé des questions à ce sujet récemment dans une interview. Je vais faire un petit résumé de l'animation pendant que j'ai le temps maintenant. Parallèlement, une démo d'animation image par image est implémentée sous forme d'exercice

Liste des attributs d'animation

Parce qu'il existe de nombreux attributs d'animation, il est un peu pénible de le voir dans w3c, alors je viens de le faire Une carte, vous pouvez la voir d'un coup d'œil si vous souhaitez la vérifier plus tard

. Utiliser l'animation pour réaliser une animation image par image

Se familiariser avec les propriétés de l'animation Après cela, je dois trouver un petit projet simple à mettre en œuvre, c'est tellement intéressant. Lançons-en un d'abord pour me satisfaire
L'idée est très simple, c'est de donner à l'élément un arrière-plan de sprite, puis d'ajouter l'animation du cadre pour changer la position de l'arrière-plan :

@keyframes run{   
    from{   
        background-position: 0 0;   
    }   
    to{   
        background-position: -1540px 0 ;   
    }   
}   
p{   
    width:140px;   
    height:140px;   
    background: url(run.png) ;   
    animation-name：run;   
    animation-duration:1s;   
    animation-iteration-count:infinite;   
}

Mais après l'avoir exécuté, nous avons constaté que l'animation d'image entre chaque image d'animation glisse, pas l'effet que nous voulons, pourquoi ?

Il s'avère que l'animation passe en mode facilité par défaut, qui insère une animation d'interpolation entre chaque image clé, donc l'effet d'animation est cohérent
C'est facile à résoudre si vous connaissez la raison :

@keyframes run{   
    0%, 8%{  /*动作一*/  }   
    9.2%, 17.2%{  /*动作二*/  }   
    ...   
}

étape 1 : restez pendant 8 images entre les actions, 0 % définit l'action 1, l'action 1 se termine à 8 %

étape 2 : transition entre les actions pendant 1,2 images, 9,2 % définit l'action deux , L'action 2 se termine à 17,2%

Code complet :

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css3逐帧动画</title>  
    <style>  
    @keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    @-webkit-keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    p{   
        width:140px;   
        height:140px;   
        background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;   
        animation:run 1s infinite;   
            -webkit-animation:run 1s infinite;   
        animation-fill-mode : backwards;   
            -webkit-animation-fill-mode : backwards;   
    }   
    </style>  
</head>  
<body>  
    <p></p>  
</body>  
</html>

Il existe une autre méthode d'implémentation, qui consiste à utiliser steps(), qui est entre les images Animation par étapes, ceci n'est pas écrit en w3c, postez d'abord une photo

Comme le montre l'image ci-dessus :

étapes (1,start ) : Sauter à 100 % depuis le début de l'animation jusqu'à la fin de cette image (pas tout le cycle)

steps(1,end) : Conserver le style 0% jusqu'à la fin de cette image ( pas le cycle entier)

De plus, vous pouvez également définir directement la fonction de synchronisation d'animation : step-start/step-end

L'effet de démarrage par étapes est équivalent à steps(1,start), et l'effet step-end est équivalent à steps(1,end)

Effet final, car le problème d'enregistrement peut être un peu lent, les étudiants intéressés peuvent directement copier le code et l'exécuter :

Code complet :

<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>css3逐帧动画</title>  
        <style>  
        @keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        @-webkit-keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        p{   
            width:140px;   
            height:140px;   
            background: url(754767/201606/754767-20160601000042992-1734972084.png) ;   
            animation:run 1s steps(1, start) infinite;   
                -webkit-animation:run 1s steps(1, start) infinite;   
        }   
        </style>  
    </head>  
    <body>  
        <p></p>  
    </body>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. .Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS3 box-reflect pour créer un effet de réflexion

À propos de l'attribut d'animation dans CSS Comment utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de l'utilisation de l'attribut border-image en CSS3Article suivant：À propos de l'utilisation de l'attribut border-image en CSS3

Articles Liés

Voir plus