Analyse sur l'utilisation de la propriété d'animation Animation en CSS3-tutoriel CSS-php.cn

Analyse sur l'utilisation de la propriété d'animation Animation en CSS3

不言

Libérer： 2018-06-11 15:32:03

original

1567 Les gens l'ont consulté

Cet article présente principalement en détail l'utilisation de l'attribut d'animation Animation dans CSS3 et vous apprend à utiliser l'animation d'animation. Les amis intéressés peuvent s'y référer

Pour utiliser l'animation d'animation, vous devez d'abord vous familiariser avec elle. . images clés, les règles de syntaxe des images clés : la dénomination commence par "@keyframes", suivi du "nom de l'animation" plus une paire d'accolades "{}". Entre parenthèses se trouvent quelques règles de style pour différentes périodes. Différentes images clés sont exprimées par de (équivalent à 0%), à (équivalent à 100%) ou en pourcentage (afin d'obtenir le meilleur support du navigateur, il est recommandé d'utiliser un pourcentage pour définir une animation simple comme suit :

@keyframes myfirst /*定义动画名*/
    {   
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式，0%可以换成from*/
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%可以换成to*/
    }

Copier après la connexion

@keyframes est défini pour que cela fonctionne, il doit être lié à un sélecteur via une animation, sinon l'animation n'aura aucun effet. Les propriétés d'animation sont répertoriées ci-dessous :

Ce qui suit définit toutes les propriétés ci-dessus

animation-name:myfirst;   
animation-duration:5s;   
animation-timing-function:linear;   
animation-delay:1s;   
animation-iteration-count:infinite;   
animation-direction:alternate;   
animation-play-state:running;

Copier après la connexion

Toutes les propriétés ci-dessus codes Peuvent être abrégés comme suit :

animation:myfirst 5s linear 2s infinite alternate;   
animation-play-state:running;

Copier après la connexion

Compatibilité des navigateurs

Internet Explorer 10, Firefox et Opera prennent en charge les règles @keyframes et les attributs d'animation.

Chrome et Safari nécessitent le préfixe -webkit-.

Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge les règles @keyframe ou les propriétés d'animation.

Ce qui suit est un exemple de code complet des images clés et des attributs d'animation introduits ci-dessus :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation演示</title>
    <style>
    p   
    {   
    width:100px;   
    height:100px;   
    background:red;   
    position:relative;   
    animation-name:myfirst;   
    animation-duration:5s;   
    animation-timing-function:linear;   
    animation-delay:1s;   
    animation-iteration-count:infinite;   
    animation-direction:alternate;   
    animation-play-state:running;   
    /* Safari and Chrome: */   
    -webkit-animation-name:myfirst;   
    -webkit-animation-duration:5s;   
    -webkit-animation-timing-function:linear;   
    -webkit-animation-delay:1s;   
    -webkit-animation-iteration-count:infinite;   
    -webkit-animation-direction:alternate;   
    -webkit-animation-play-state:running;   
    }   
    @keyframes myfirst /*定义动画名*/   
    {   
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式，0%相当于from*/   
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%相当于to*/   
    }   
    @-webkit-keyframes myfirst /* Safari and Chrome */   
    {   
    0%   {background:red; left:0px; top:0px;}   
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;}   
    }   
    </style>
</head>
<body>
    <p>该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    <p></p>
</body>
</html>

Copier après la connexion

Le code ci-dessus démontre qu'un carré se déplace le long d'une trajectoire carrée et que les temps cardinaux se déplacent Dans le sens positif, appuyez plusieurs fois dans le sens inverse et la couleur changera pendant le mouvement. Les lecteurs peuvent exécuter le code pour observer les effets spécifiques.

Ce qui précède représente 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 :

Analyse de la mise à l'échelle de l'échelle dans la transformation CSS3

À propos du pseudo avant et :après dans l'analyse CSS de l'utilisation d'éléments

À propos du code pour utiliser des points de suspension pour remplacer le texte CSS lorsqu'il dépasse le div ou le span

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!