How to understand the use of the Css3-webkit-animation-fill-mode property value as both

everyone knows that the-webkit-animation-fill-mode property is to retrieve or set the state outside the object's animation time, but I have always had a question about its property values, what is the difference between both and forwards? After constant testing and searching, the individual thinks the difference is:both isSets the state of an object to the end or start of an animation.mainly depends on the-webkit-animation-direction This attribute, why do you say so? Please see below:

<class= "center"></div>

1 . Center{2 Border:1px solid #332;3 width:60px;4 Height:60px;5 Border-radius:60px;6 background:Rgba (0,0,0,0.5);7 -webkit-animation:ani 1s ease-in 2 alternate both;8}9 @-webkit-keyframes ani{Ten 0%{-webkit-transform:TranslateX (0);} One 50%{-webkit-transform:TranslateX (40px);} A 100%{-webkit-transform:TranslateX (100px);} - }

Note: When the direction is set in the opposite direction, according to the number of times the animation performed to determine whether the ball is in the backwards or forwards state, the above code is to perform an even number of times, the animation back and forth movement, and finally back to the initial state of very backwards state, when the odd number of times, Is the end state forwards state

How to understand the use of the Css3-webkit-animation-fill-mode property value as both