Customizing CSS Bug (animation-fill-mode: forwards; gets filtered out upon save)

• 

  michaelvandenberg · Member · Aug 13, 2015 at 5:50 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I was just playing around with CSS3 Animations on my WordPress.com website when I noticed that this piece of CSS code gets filtered out after hitting save:

  -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;

  Just paste this animation in the customizer:

  /* The animation code */
  @-webkit-keyframes hinge {
  	0% {
  		-webkit-transform-origin: top left;
  		transform-origin: top left;
  		-webkit-animation-timing-function: ease-in-out;
  		animation-timing-function: ease-in-out;
  	}
  
  	20%, 60% {
  		-webkit-transform: rotate3d(0,0,1,80deg);
  		transform: rotate3d(0,0,1,80deg);
  		-webkit-transform-origin: top left;
  		transform-origin: top left;
  		-webkit-animation-timing-function: ease-in-out;
  		animation-timing-function: ease-in-out;
  	}
  
  	40%, 80% {
  		-webkit-transform: rotate3d(0,0,1,60deg);
  		transform: rotate3d(0,0,1,60deg);
  		-webkit-transform-origin: top left;
  		transform-origin: top left;
  		-webkit-animation-timing-function: ease-in-out;
  		animation-timing-function: ease-in-out;
  		opacity: 1;
  	}
  
  	100% {
  		-webkit-transform: translate3d(0,700px,0);
  		transform: translate3d(0,700px,0);
  		opacity: 0;
  	}
  }
  
  @keyframes hinge {
  	0% {
  		-webkit-transform-origin: top left;
  		transform-origin: top left;
  		-webkit-animation-timing-function: ease-in-out;
  		animation-timing-function: ease-in-out;
  	}
  
  	20%, 60% {
  		-webkit-transform: rotate3d(0,0,1,80deg);
  		transform: rotate3d(0,0,1,80deg);
  		-webkit-transform-origin: top left;
  		transform-origin: top left;
  		-webkit-animation-timing-function: ease-in-out;
  		animation-timing-function: ease-in-out;
  	}
  
  	40%, 80% {
  		-webkit-transform: rotate3d(0,0,1,60deg);
  		transform: rotate3d(0,0,1,60deg);
  		-webkit-transform-origin: top left;
  		transform-origin: top left;
  		-webkit-animation-timing-function: ease-in-out;
  		animation-timing-function: ease-in-out;
  		opacity: 1;
  	}
  
  	100% {
  		-webkit-transform: translate3d(0,700px,0);
  		transform: translate3d(0,700px,0);
  		opacity: 0;
  	}
  }
  
  /* The element to apply the animation to */
  .site-title {
  	-webkit-animation-name: hinge;
  	animation-name: hinge;
  	-webkit-animation-duration: 2s;
  	animation-duration: 2s;
  	-webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
  }

  • At first this seems to be working. The animation runs and the site title remains hidden when it’s finished.
  • Now hit save and reload the page.
  • Now the animation runs and the site title reappears again after the animation has finished.

  And if you inspect your CSS you’ll notice that animation-fill-mode: forwards; has disappeared.

  Can this be fixed or is there any good reason why you’ve filtered this out? :)

  Best regards,

  Michael

• 

  thesacredpath · Member · Aug 14, 2015 at 7:43 am

  • Copy link

  Hi Michael, we are always looking at the new CSS3 stuff and allowing it when things are solid and browser support is there. Currently @keyframe hinge is not allowed.

  I’ll check with our developers tomorrow and see it things are solid enough with hinge for it to be added.

• 

  michaelvandenberg · Member · Aug 14, 2015 at 8:13 am

  • Copy link

  Thanks! :)

  It’s just this bit that isn’t working:

  -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;

  @keyframe hinge was just an example :)

• 

  thesacredpath · Member · Aug 14, 2015 at 8:36 am

  • Copy link

  Ah, thanks for the clarification. I’ll get back to you as soon as I get with the developers.

• 

  michaelvandenberg · Member · Aug 21, 2015 at 5:11 pm

  • Copy link

  Any updates on this? :)

  I guess it’s not a big thing. I can start with the element hidden, then do the animation, after which it will be hidden again.

• 

  thesacredpath · Member · Aug 21, 2015 at 9:12 pm

  • Copy link

  Michael, there is a ticket on this in our system, and I’ve added your voice to the ticket. From the looks of things this will be added, but I can’t give you any sort of timeframe at this time.