Doubt about the property "Animation-name"

Question

I am studying all properties of CSS3 and came to me a doubt about the property Animation-name.

The value that is given to this property is either customizable or is a language default value?

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 it made me think that the value mymove is a user defined value and not a language predefined.

Answer 1

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

The estate Animation-name sets a list of animations that apply. Each name is used to select the keyframe in the rule that provides 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 the cascading animations. If multiple animations try to modify the same property, then the animation closest to the end of the name list wins.

Possible values for this property are:

none - None 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 property (comma-separated), if any. If such keyframes do not exist, there is no animation.

See the following example: Three keyframes are specified - slide-right, slide-up, slide-down. However two of them change the same property (margin-top). If the order of the keyframes declaration slide-up and slide-down is changed in property animation-name, is worth the one declared 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 on: http://dev.w3.org/csswg/css-animations/#Animation-name