mozilla
Vos résultats de recherche

    @keyframes

    Cette fonction est expérimentale
    Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
    Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

    Résumé

    La règle CSS @keyframes permet aux auteurs de controller les étapes intermédiaires d'une séquence d'animation CSS en établissant des Images Clés (keyframes) qui sont atteint à certains points durant l'animation. Cela permet un contrôle plus spécifique de ces étapes intermédiaires qu'il n'est possible en laissant le navigateur tout gérer automatiquement.

    The @keyframes at-rule can be accessed via the CSS object model interface CSSKeyframesRule.

    To use keyframes, you create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe list. Each @keyframes rule contains a style list of keyframe selectors, each of which is comprised of a percentage along the animation at which the keyframe occurs as well as a block containing the style information for that keyframe.

    You can list the keyframes in any order; they will be handled in the order in which their specified percentages indicate they should occur.

    Valid keyframe lists

    In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.

    If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.

    Duplicate resolution

    If multiple keyframe sets exist for a given name, the last one encountered is used. @keyframes rules don't cascade, so animations never drive keyframes from more than one rule set.

    If a given animation time offset is duplicated, the last keyframe in the @keyframes rule for that percentage is used for that frame. There's no cascading within a @keyframes rule if multiple keyframes specify the same percentage values.

    When properties are left out of some keyframes

    Any properties that you don't specify in every keyframe are interpolated (with the exception of those that can't be interpolated, which are instead dropped from the animation entirely). For example:

    @keyframes identifier {
      0% { top: 0; left: 0; }
      30% { top: 50px; }
      68%, 72% { left: 50px; }
      100% { top: 100px; left: 100%; }
    }
    

    Here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 68%, and 100% keyframes.

    Only properties that are specified in both the 0% and 100% keyframes will be animated; any property not included in both of those keyframes will retain their starting value for the duration of the animation sequence.

    When a keyframe is defined multiple times

    The specification defines that if a keyframe is defined multiple times but not all properties affected are specified in each keyframe, only the values specified in the latest keyframe are considered. For example:

    @keyframes identifier {
      0% { top: 0; }
      50% { top: 30px; left: 20px; }
      50% { top: 10px; }
      100% { top: 0; }
    }
    

    In this example, at the 50% keyframe, the value used is top: 10px and all other values at this keyframe are ignored.

      Cascading keyframes are supported starting in Firefox 14. For the example above, it means that at the 50% keyframe, the value left: 20px will be considered. This is not defined in the specification yet, but it is being discussed.

    Syntax

    @keyframes <identifier> {
      [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
    }
    

    Values

    <identifier>
    A name identifying the keyframe list. This must match the identifier production in CSS syntax.
    from
    A starting offset of 0%.
    to
    An ending offset of 100%.
    <percentage>
    A percentage of the time through the animation sequence at which the specified keyframe should occur.

    Examples

    See CSS animations for examples.

    Specifications

    Specification Status Comment
    CSS Animations
    La définition de '@keyframes' dans cette spécification.
    Version de travail  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (Oui)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    10 12 -o
    12.10 #
    4.0-webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support (Oui)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    ? ? ?

    See also

    Étiquettes et contributeurs liés au document

    Contributors to this page: Sheppy, teoli, LaChouette
    Dernière mise à jour par : Sheppy,