\n <\/td>\n | /**<\/span><\/td>\n <\/tr>\n \n <\/td>\n | * This is a simplified version without<\/span><\/td>\n <\/tr>\n \n <\/td>\n | * vendor prefixes. With them included<\/span><\/td>\n <\/tr>\n \n <\/td>\n | * (which you will need) things get far<\/span><\/td>\n <\/tr>\n \n <\/td>\n | * more verbose!<\/span><\/td>\n <\/tr>\n \n <\/td>\n | */<\/span><\/td>\n <\/tr>\n \n <\/td>\n | .box<\/span> {<\/td>\n <\/tr>\n \n <\/td>\n | /* Choose the animation */<\/span><\/td>\n <\/tr>\n \n <\/td>\n | animation-name<\/span>:<\/span> movingBox;<\/td>\n <\/tr>\n \n <\/td>\n | \n<\/td>\n <\/tr>\n | \n <\/td>\n | /* The animation’s duration */<\/span><\/td>\n <\/tr>\n \n <\/td>\n | animation-duration<\/span>:<\/span> 1300ms<\/span><\/span>;<\/td>\n <\/tr>\n \n <\/td>\n | \n<\/td>\n <\/tr>\n | \n <\/td>\n | /* The number of times we want<\/span><\/td>\n <\/tr>\n \n <\/td>\n | the animation to run */<\/span><\/td>\n <\/tr>\n \n <\/td>\n | animation-iteration-count<\/span>:<\/span> infinite;<\/td>\n <\/tr>\n \n <\/td>\n | \n<\/td>\n <\/tr>\n | \n <\/td>\n | /* Causes the animation to reverse<\/span><\/td>\n <\/tr>\n \n <\/td>\n | on every odd iteration */<\/span><\/td>\n <\/tr>\n \n <\/td>\n | animation-direction<\/span>:<\/span> alternate;<\/td>\n <\/tr>\n \n <\/td>\n | }<\/td>\n <\/tr>\n | \n <\/td>\n | \n<\/td>\n <\/tr>\n | \n <\/td>\n | @keyframes<\/span> movingBox {<\/td>\n <\/tr>\n \n <\/td>\n | 0%<\/span><\/span> {<\/td>\n <\/tr>\n \n <\/td>\n | transform<\/span>:<\/span> translate<\/span>(0<\/span>,<\/span> 0<\/span>);<\/td>\n <\/tr>\n \n <\/td>\n | opacity<\/span>:<\/span> 0.3<\/span>;<\/td>\n <\/tr>\n \n <\/td>\n | }<\/td>\n <\/tr>\n | \n <\/td>\n | \n<\/td>\n <\/tr>\n | \n <\/td>\n | 25%<\/span><\/span> {<\/td>\n <\/tr>\n \n <\/td>\n | opacity<\/span>:<\/span> 0.9<\/span>;<\/td>\n <\/tr>\n \n <\/td>\n | }<\/td>\n <\/tr>\n | \n <\/td>\n | \n<\/td>\n <\/tr>\n | \n <\/td>\n | 50%<\/span><\/span> {<\/td>\n <\/tr>\n \n <\/td>\n | transform<\/span>:<\/span> translate<\/span>(100px<\/span><\/span>,<\/span> 100px<\/span><\/span>);<\/td>\n <\/tr>\n \n <\/td>\n | opacity<\/span>:<\/span> 0.2<\/span>;<\/td>\n <\/tr>\n \n <\/td>\n | }<\/td>\n <\/tr>\n | \n <\/td>\n | \n<\/td>\n <\/tr>\n | \n <\/td>\n | 100%<\/span><\/span> {<\/td>\n <\/tr>\n \n <\/td>\n | transform<\/span>:<\/span> translate<\/span>(30px<\/span><\/span>,<\/span> 30px<\/span><\/span>);<\/td>\n <\/tr>\n \n <\/td>\n | opacity<\/span>:<\/span> 0.8<\/span>;<\/td>\n <\/tr>\n \n <\/td>\n | }<\/td>\n <\/tr>\n | \n <\/td>\n | }<\/td>\n <\/tr>\n <\/table>\n<\/div>\n\n\n <\/div>\n\n <\/div>\n<\/div>\n\n <\/div>\n | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |