web content no ejecuta las animaciones css

Buenas

soy novata en la programación, he realizado un HTML con una animación css. Al subir la al folio a través del web content y con HTMLResources.zip solo carga del archivo los estilos (fondo, tipografía...) pero no ejecuta las animaciones -webkit

@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
body {
  font-family: 'Raleway';
  line-height: 1.7;
  background: #5bc4eb;
  color: #023c52; }

.h-event {
  padding: 20px;
  position: absolute;
  top: 50%;
  left: calc(50% - 350px);
  transform: translate(0, -50%);
  width: 700px; }

.p-name, a {
  text-transform: uppercase;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
  display: block; }

.p-name {
  font-size: 77px;
  line-height: 1;
  text-rendering: optimizeLegibility; }
  .p-name span {
    display: block;
    font-size: 186px;
    font-weight: 600;
    line-height: .9;
    text-stroke: 1px #023c52;
    color: rgba(255, 255, 255, 0.9);
    text-rendering: geometricPrecision;
    text-shadow: 5px 0 0 white, 0 5px 0 white;
    -webkit-animation: crazytext .1s linear 0s infinite alternate;
    animation: crazytext .1s linear 0s infinite alternate; }

@-webkit-keyframes crazytext {
  10% {
    text-shadow: 15px 0 0 #ff5c4f, 0 15px 0 #ffe24f; }
  50% {
    text-shadow: -5px 5px 0 #ff5c4f, -5px 5px 0 #ffe24f; }
  70% {
    text-shadow: -10px 10px 0 #ff5c4f, -10px 10px 0 #ffe24f; } }
@keyframes crazytext {
  10% {
    text-shadow: 15px 0 0 #ff5c4f, 0 15px 0 #ffe24f; }
  50% {
    text-shadow: -5px 5px 0 #ff5c4f, -5px 5px 0 #ffe24f; }
  70% {
    text-shadow: -10px 10px 0 #ff5c4f, -10px 10px 0 #ffe24f; } }
a {
  color: #b2e7fb; }

p {
  text-align: center; }

.date-time {
  font-weight: 600;
  font-size: 30px; }

.p-summary {
  font-weight: 200;
  font-size: 30px; }