Maison > Article > interface Web > L'animation CSS3 implémente l'introduction d'un exemple d'effet d'animation image par image

L'animation CSS3 implémente l'introduction d'un exemple d'effet d'animation image par image

高洛峰original: 2017-03-09 17:11:001528parcourir

Cet article présente principalement l'animation CSS3 pour obtenir des exemples d'effets d'animation image par image. Il 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 je. je l'utilise rarement, et on m'a récemment posé une question à ce sujet dans une interview. Je ferai un bref 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

CSS3 animation实现逐帧动画效果示例介绍

. 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;   
}

CSS3 animation实现逐帧动画效果示例介绍

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 8 images entre les actions, définissez l'action 1 à 0 %, terminez l'action 1 à 8 %

étape 2 : Transition entre les actions pendant 1,2 images , 9,2% définit l'action deux et l'action deux 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 de mise en œuvre, qui consiste à utiliser les étapes ( ), c'est-à-dire une animation Step entre les images, ce n'est pas écrit en w3c, postez d'abord une photo

CSS3 animation实现逐帧动画效果示例介绍

Comme le montre l'image ci-dessus :

steps(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>

CSS3 animation实现逐帧动画效果示例介绍

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. J'espère également que tout le monde soutiendra le site Web PHP chinois.

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：Partager un résumé de la façon d'implémenter la mise en page CSS à deux colonnesArticle suivant：Partager un résumé de la façon d'implémenter la mise en page CSS à deux colonnes

Articles Liés

Voir plus