@component

Description

The @component context query describes information about the ad component from which the CSS/Javascript is being written in. For example, if you are editing the component called banner, the @component context query when referenced in /banner/index.css would be referencing information about the banner component and how it is currently being viewed.

Example Usage

One common usage of the @component context query would be to animate the ad in the same way when ever the ad came into view. You could use the viewable context query to trigger that animation as show below:

CSS Example

@keyframes entranceAnimation{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

.entrance-element {
	animation: none;
	
	@component (viewable: true) {
		animation: entranceAnimation linear 4s;
	}
}