how to add custom html and css to wordpress

Question

for eg if i want to add this code from this site https://codepen.io/tamak/pen/ApLcq

html Tutorial

Animated

rollOut bounce flash pulse rubberBand swing shake tada wobble bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX

Click

rollOut bounce flash pulse rubberBand swing shake tada wobble bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX

Activate

css div { width: 120px; height: 100px; display: block; background: green; text-align: center; line-height: 100px; margin: 10px; float:left; color: white; border-radius:10px; }

.animated { animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; }

js $(document).ready(function() {

animationClick('.rollOut1','rollOut'); animationClick('.bounce1','bounce'); animationClick('.flash1','flash'); animationClick('.pulse1','pulse'); animationClick('.rubberBand1','rubberBand'); animationClick('.shake1','shake'); animationClick('.tada1','tada'); animationClick('.swing1','swing'); animationClick('.wobble1','wobble'); animationClick('.bounceIn1','bounceIn'); animationClick('.bounceInDown1','bounceInDown'); animationClick('.bounceInLeft1','bounceInLeft'); animationClick('.bounceInRight1','bounceInRight'); animationClick('.bounceInUp1','bounceInUp'); animationClick('.bounceOut1','bounceOut'); animationClick('.bounceOutDown1','bounceOutDown'); animationClick('.bounceOutLeft1','bounceOutLeft'); animationClick('.bounceOutRight1','bounceOutRight'); animationClick('.bounceOutUp1','bounceOutUp'); animationClick('.fadeIn1','fadeIn'); animationClick('.fadeInDown1','fadeInDown'); animationClick('.fadeInDownBig1','fadeInDownBig'); animationClick('.fadeInLeft1','fadeInLeft'); animationClick('.fadeInLeftBig1','fadeInLeftBig'); animationClick('.fadeInRight1','fadeInRight'); animationClick('.fadeInRightBig1','fadeInRightBig'); animationClick('.fadeInUp1','fadeInUp'); animationClick('.fadeInUpBig1','fadeInUpBig'); animationClick('.fadeOut1','fadeOut');

animationClick('.fadeOutDown1','fadeOutDown'); animationClick('.fadeOutDownBig1','fadeOutDownBig'); animationClick('.fadeOutLeft1','fadeOutLeft'); animationClick('.fadeOutLeftBig1','fadeOutLeftBig'); animationClick('.fadeOutRight1','fadeOutRight'); animationClick('.fadeOutRightBig1','fadeOutRightBig'); animationClick('.fadeOutUp1','fadeOutUp'); animationClick('.fadeOutUpBig1','fadeOutUpBig'); animationClick('.flipInX1','flipInX');

function animationHover(element, animation){ element = $(element); element.hover( function() { element.addClass('animated ' + animation); }, function(){ //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); };

function animationClick(element, animation){ element = $(element); element.click( function() { element.addClass('animated ' + animation); //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); };

});

wer and how to add i hv used codesnippets and custo html css js plugin to do but dont know how to call in wordpress page i need multiple times to call this animation

Answer 1

Login to wordpress then Appearance->Theme Editor

Add your CSS to style.css file

and place your Javascript code somewhere in footer.php file with $ replaced with jQuery

and on page edit option place css classes where you want to give css to