CSS Lesson #26: Animate your Cookie Banner

We built our new cookie banners for 6.0 with the idea to be fully flexible. A solid, minimal default set-up complies with WCAG and ADA and has many settings directly available in the back-end, and is fully customizable as you expect from WordPress.

In this article, we will show you how you can add different animations to your banner. You can view all the different types of animations we use and much more on Animate.css, but for now, we selected four different styles to show. For most websites, this works out of the box and comes with the browser, but if yours doesn’t, we will first explain how to add the CSS should you want a style that needs it.

How to add the animate.css

As mentioned above, for most websites you don’t need to add this CSS, so we recommend testing this first, but should you want an animation style that doesn’t work you can add this link in the
< head >< /head >
of your website.
				
					/** Try without first. It might be included by your theme.
 ** 
*/

< link rel="stylesheet" href="https://cdnjs.cloudflare.com/
ajax/libs/animate.css/4.1.1/animate.min.css >
				
			

To do this you can for example use a plugin such as Header Footer Code Manager. Here you can just put the line in to the head without any trouble, or if you prefer add it with FTP.

Screenshot of Header Footer Code Manager

Choose your animation

Now we can add the CSS for your preferred animation. Because we already have an animation in place it is very easy to edit. 

The first step is to make sure to settings are right, go to Complianz > Cookie banner Settings > General > Custom CSS, and turn this on.

Then go to Complianz >  Cookie Banner  Settings > Appearance, and make sure you have these settings:

  • Position: Everything, but centered*
  • Animation: None
Now you choose your animation and go to Complianz > Cookie banner > Custom CSS and add the code!

*The transform properties of our centered banner do not allow certain animations.
Image from Gyazo
				
					.cmplz-cookiebanner {
    animation: rubberBand 1s;
    -webkit-animation: rubberBand 1s;
    -moz-animation:rubberBand 1s;
    -o-animation: rubberBand 1s;
    -ms-animation: rubberBand 1s;
}
				
			
Image from Gyazo
				
					.cmplz-cookiebanner {
    animation: tada 1s;
    -webkit-animation: tada 1s;
    -moz-animation: tada 1s;
    -o-animation: tada 1s;
    -ms-animation: tada 1s;
    animation-delay: 0.3s;
}
				
			
Image from Gyazo
				
					.cmplz-cookiebanner {
    animation: rollIn 1s;
    -webkit-animation: rollIn 1s;
    -moz-animation: rollIn 1s;
    -o-animation: rollIn 1s;
    -ms-animation: rollIn 1s;
}
				
			
Image from Gyazo
				
					.cmplz-cookiebanner {
    animation: flipInY 2s;
    -webkit-animation: flipInY 2s;
    -moz-animation: flipInY 2s;
    -o-animation: flipInY 2s;
    -ms-animation: flipInY 2s;
}
				
			

That’s it! Of course, these aren’t suited for every website, but if you are feeling adventurous, give it a try!

Join 1M+ users and install The Privacy Suite for WordPress locally, automated or fully customized, and access our awesome support if you need any help!

Complianz has received its Google CMP Certification to conform to requirements for publishers using Google advertising products.