Doubt about the property "animation-name"

Question

Doubt about the property "animation-name"

Navigation

#1 by (2 votes)

2

I'm studying all CSS3 properties and I had a question about the animation-name property.

Is the value given to this property personizable or is it a pre-defined value for the language?

The doubt came after reading a code that had the following content:

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation-name: mymove;  /* Chrome, Safari, Opera */
    -webkit-animation-duration: 5s;  /* Chrome, Safari, Opera */
    animation-name: mymove;
    animation-duration: 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

In which made me think that the mymove value is a user-defined value rather than a pre-defined language.

css

asked by anonymous 09.06.2015 / 00:30

1 answer

Translation OpenCart Theme Attach many objects with id = 0

score 2 · Accepted Answer

Yes, this is a custom name that should reference the name given to the @keyframe directive. According to the W3 specification:

The animation-name property defines a list of animations that apply. Each name is used to select the keyframe in the rule that provides the property values for the animation. If the name does not match any keyframe in the rule, there are no properties to be animated and the animation will not be executed. Also, if the animation name is none , then there will be no animation. This can be used to replace cascading animations. If multiple animations try to modify the same property, then the animation closest to the end of the list of names wins.

The possible values for this property are:

none - No keyframe is specified, so there is no animation. Any other specified animation property will have no effect.

<custom-ident> - The animation will use the keyframes specified by the property (separated by commas), if they exist. If such keyframes do not exist, there is no animation.

See the following example: Three keyframes - slide-right, slide-up, slide-down are specified. But two of them change the same property (margin-top). If the order of the declaration of the keyframes slide-up and slide-down is changed in the property animation-name , it is worth the declaration last.

div {
  animation-name: slide-right, slide-up, slide-down;
  animation-duration: 2s;
}

@keyframes slide-down {
  from {
    margin-top: 0px;
  }
  50% {
    margin-top: 110px;
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  to {
    margin-top: 200px;
  }
}

@keyframes slide-right {
  from {
    margin-left: 0px;
  }
  50% {
    margin-left: 110px;
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  to {
    margin-left: 200px;
  }
}

@keyframes slide-up {
  from {
    margin-top: 200px;
  }
  50% {
    margin-top: 110px;
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  to {
    margin-top: 0px;
  }
}

<div style="height: 100px; width: 100px; background-color: #ff0000;"></div>

Read the full specification at: link