advanced css3 animation hack

• 

  kerin2014 · Member · Oct 11, 2014 at 5:57 pm

  • Copy link
  • Add topic to favorites

  my site uses some fancy code (using a trick dreamed up by a WP happiness engineer!) in the header description to contain an image that is then overlayed over a grey rectangular background image

  so I was able to do some simple transform, like scale no problem (although translateX did flicker). i also combined scale and opacity in order to make the canvas fade in as it scales. so far so good.

  since i cannot associate a user event (such as causing a click on the cat image you see on my blog top right to link to some other page), i thought i would add text to convey a message (in this case: “New Arrival!”). So I created an image that is actually 123px x 300px. the height is double the height initially allotted to the image in the CSS you see below.cat ad

  Then I thought I would simply add some animation/keyframe code, hoping that this would cause the image to scroll in an infinite loop from cat to text. Although the cat displays fine, despite the actual image being double the size of the “view window” alloted to it, nevertheless no amimation occurs. I can’t figure out why?

  Can any happiness engineer come to the rescue? Many thanks!!!

  h2.site-description {
  	height: 150px;
  	width: 123px;
  	background: url('//needlepointlandstore.files.wordpress.com/2014/10/cat-ad2.png');
  	border: 0;
  	font: 0/0 a;
  	text-shadow: none;
  	color: transparent;
  	position: absolute;
  	top: 80px;
  	right: 200px;
  	opacity: .6;
  	animation: scrollad 6s linear infinite;
  }
  
  h2.site-description:hover {
  	transform: scale(1.5,1.5);
  	-webkit-transform: scale(1.5,1.5);
  	opacity: 1;
  }
  
  @keyframes scrollad {
  	0% {
  		background-position: 0 0;
  	}
  
  	100% {
  		background-position: 0 300px;
  	}
  }

  The theme I am using is Fontfolio.

  The blog I need help with is: (visible only to logged in users)

• 

  kerin2014 · Member · Oct 12, 2014 at 6:05 am

  • Copy link

  I figured it out. There were 2 problems:

  1) browser support. I discovered quite by accident (after noticing the cat image had disappeared after I added animation, see point #2 below) worked fine on chrome as per the css3 spec. I just added duplicative webkit code for chrome, opera and safari, and the scrolling problem was solved. woohoo!

  2) Adblock Plus (which I have as an add on on my Firefox browser) hoses CSS3 animation, which is a stinker! I had to explicitly disable Adblock Plus when visiting needlepointland.com, then I had no problems with the animation being visible.

  This is really cool, because I can now add n number of alternating text and images to scroll to convey various messages to my readers. I shall probably end up with more inventive and technically ads down the road — all confined to that teeny window in the grey rectangle.

  I love this, but — just in this particular instance — resent that Adblcok Plus will prevent some of my viewers from seeing this effect.