Let's add the -webkit- prefixed version of the animation property:
nav figure { position: absolute; top: -20px; left: 50px; -webkit-animation: crazyShark 1s ease; animation: crazyShark 1s ease;}
We will do the same for @keyframes:
@-webkit-keyframes crazyShark { 0% {-webkit-transform: translate(90%, 70%);opacity: 0;} 33% {-webkit-transform: translate(40%, 20%);} 66% {-webkit-transform: translate(10%, 50%);} 100% {-webkit-transform: translate(0%);opacity: 1;}}@keyframes crazyShark { 0% {transform: translate(90%, 70%);opacity: 0;} 33% {transform: translate(40%, 20%);} 66% {transform: translate(10%, 50%);} 100% {transform: translate(0%);opacity: 1;}}
Notice that I've prefixed the @keyframes with @-webkit-keyframes, as well as, ...
