Table des matières
The @keyframes
The Animation
增加浏览器前缀:
矩形变圆形实例
基本元素
声明Keyframes
应用动画
使用Timing-Function
最后的事情
Maison interface Web tutoriel HTML css Animation初体验_html/css_WEB-ITnose

css Animation初体验_html/css_WEB-ITnose

Jun 24, 2016 am 11:45 AM

目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示。适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层。

在本教程中我会向你介绍CSS动画;随着浏览器支持性的提高已经变得越来越流行了,css动画在做一些事情上有很高的性能。在涵盖了基础知识后,我们将建一个快速的例子:矩形变成圆形的动画。

演示看这里

 

@keyframes和动画 介绍

css动画的主要组件:@keyframes,创建动画的css规则。把@keyframes想象为动画步骤的时间轴。在@keyframes里,你可以定义这些步骤,每个都有不同的样式声明。

第二步,让css动画能运行,需要为@keyframes绑定一个选择符。基于这些步骤,@keyframes声明的所有代码都会变解析然后对新的样式进行初始化。

 

The @keyframes

这里我们将会设置动画的步骤,@keyframes的属性如下:

  • 选择符的名字(这个例子中是tutsFade) .
  • 步骤:0%-100%;  from (equal to 0%) and to (equal to 100%).
  • CSS 样式: 每个阶段要应用到的样式.
  • 例子:

    @keyframes tutsFade {

       0% {

         opacity: 1 ;

       }

       100% {

         opacity: 0 ;

       }

    }

    或者:

    @keyframes tutsFade {

       from {

         opacity: 1 ;

       }

       to {

         opacity: 0 ;

       }

    }

    简写:

    @keyframes tutsFade {

       to {

         opacity: 0 ;

       }

    }

     

    上面的代码为元素应用一个不透明度的过渡,从opacity: 1到opacity: 0.上面三种方法实现的效果是一样的。

     

    The Animation

    animation的属性:

  • animation-name: @keyframes名称 (此例为 tutsFade).
  • animation-duration:时间间隔,动画从开始到结束的总长.
  • animation-timing-function: 设置动画速度 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay:动画开始前的延迟.
  • animation-iteration-count: 在动画期间它会遍历多少次.
  • animation-direction: 改变循环的方向,从开始到结束,还是从结束到开始,或者两者都.
  • animation-fill-mode: 指定动画结束时元素应用的样式 ( none | forwards | backwards | both ).
  • 例如:

    .element {

       animation-name: tutsFade;

       animation-duration: 4 s;

       animation-delay: 1 s;

       animation-iteration-count: infinite;

       animation-timing-function: linear;

       animation- direction : alternate;

    }

    简写为:

    .element {

       animation: tutsFade 4 s 1 s infinite linear alternate;

    }

    上面的代码会创建一个闪烁效果,1秒的动画延迟,4秒的动画间隔,交替的方向和无限线性循环迭代.

    增加浏览器前缀:

    在工作中,我们需要使用浏览器指定前缀确保最好的浏览器支持。标准前缀应用:

  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-
  • 动画属性使用了浏览器前缀的形式:

    .element {

         -webkit-animation: tutsFade 4 s 1 s infinite linear alternate;

         -moz-animation: tutsFade 4 s 1 s infinite linear alternate;

         -ms-animation: tutsFade 4 s 1 s infinite linear alternate;

         -o-animation: tutsFade 4 s 1 s infinite linear alternate;

         animation: tutsFade 4 s 1 s infinite linear alternate;

    }

    @keyframes的前缀使用:

    @-webkit-keyframes tutsFade { /* your style */ }

    @-moz-keyframes tutsFade { /* your style */ }

    @-ms-keyframes tutsFade { /* your style */ }

    @-o-keyframes tutsFade { /* your style */ }

    @keyframes tutsFade { /* your style */ }

     

    更多浏览器前缀: http://css3please.com/

     

    多动画

    使用逗号分割添加多动画。为tutsFade 元素添加回转,我们要声明一个额外的@keyframes然后绑定到元素上:

    .element {

       animation: tutsFade 4 s 1 s infinite linear alternate, tutsRotate 4 s 1 s infinite linear alternate;

    }

    @keyframes tutsFade {

       to {

         opacity: 0 ;

       }

    }

    @keyframes tutsRotate {

       to {

         transform: rotate( 180 deg);

       }

    }

     

    ------------------------------------分割线--------------------------------------------------------------------

    矩形变圆形实例

    这个例子中总共有五个步骤,每个步骤将为元素定义一个圆角,一个回转和不同的背景色,下面是实现的步骤和代码。

    基本元素

    首先创建一个标记,动画的元素。甚至不用class,仅仅只用一个div:

    然后运用元素选择为div添加样式:

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

    }

    声明Keyframes

    定义一个 @keyframes,命名为square-to-circle,五个步骤如下:

    @keyframes square-to-circle {

       0% {}

       25% {}

       50% {}

       75% {}

       100% {}

    }

    需要为每个步骤定义一些样式,开始为每个矩形角定义圆角:

    @-webkit-keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

       }

       25%  {

         border-radius: 50% 0 0 0 ;

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

       }

       100% {

         border-radius: 50% ;

       }

    }

    然后为每个步骤定义不同的背景色:

    @keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

         background :coral;

       }

       25%  {

         border-radius: 50% 0 0 0 ;

         background :darksalmon;

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

         background :indianred;

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

         background :lightcoral;

       }

       100% { 

         border-radius: 50% ;

         background :darksalmon;

       }

    }

    旋转DIV添加一点视觉效果:

    @keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

         background :coral;

         transform:rotate( 0 deg);

       }

       25%  {

         border-radius: 50% 0 0 0 ;

         background :darksalmon;

         transform:rotate( 45 deg);

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

         background :indianred;

         transform:rotate( 90 deg);

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

         background :lightcoral;

         transform:rotate( 135 deg);

       }

       100% { 

         border-radius: 50% ;

         background :darksalmon;

         transform:rotate( 180 deg);

       }

    }

    应用动画

    定义了square-to-circle动画后,需要将它应用到div上:

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

       animation: square-to- circle 2 s 1 s infinite alternate; 

    }

    上面使用了简写的动画属性,它们的状态是:

  • 动画名:square-to-circle.
  • 动画间隔:2s.
  • 动画延迟:1s.
  • 动画循环次数是无限的.
  • 动画运行方向是交替的, 首先从开始到结束,然后返回到最开始,然后到结束,循环往复。
  • 使用Timing-Function

    可以为animation添加的最后一个属性是animation-timing-function.定义移动的速度,加速或者减速。这个函数可以是一个非常详细的值,尴尬的手动计算,但是有很多免费的网站为timing-function提供资源和在线定制。

    例如:CSS Easing Animation Tool,现在来计算我们的定时功能。

    运用立方贝塞尔函数为square-to-circle动画添加伸缩效果。

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

       animation: square-to- circle 2 s 1 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate; 

    }

    最终的没有使用浏览器前缀(  -webkit- ,  -moz-,  -ms-,  -o- ) 的代码如下:

    div {

       width : 200px ;

       height : 200px ;

       background-color : coral;

       animation: square-to- circle 2 s . 5 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate;

    }

     

    @keyframes square-to- circle {

       0%  {

         border-radius: 0 0 0 0 ;

         background :coral;

         transform:rotate( 0 deg);

       }

       25%  {

         border-radius: 50% 0 0 0 ;

         background :darksalmon;

         transform:rotate( 45 deg);

       }

       50%  {

         border-radius: 50% 50% 0 0 ;

         background :indianred;

         transform:rotate( 90 deg);

       }

       75%  {

         border-radius: 50% 50% 50% 0 ;

         background :lightcoral;

         transform:rotate( 135 deg);

       }

       100% { 

         border-radius: 50% ;

         background :darksalmon;

         transform:rotate( 180 deg);

       }

    }

     

    最后的事情

    在现代浏览器中一切运行正常,但是在Firefox中渲染对象有点不足,边缘会出现锯齿:

    幸运的是,有一个解决方法。在div上添加透明的outline之后Firefox就会完美地渲染!

    outline: 1px solid transparent;

     

     

     

     

    Déclaration de ce site Web
    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

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    Video Face Swap

    Video Face Swap

    Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

    HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

    Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

    HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

    Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

    Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

    Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

    WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

    Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

    L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

    Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

    GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

    Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

    Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

    HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

    HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

    See all articles