CSS Animation Activity

2. Copy and paste the HTML code for the WDN Hero onto a test page on your UNLcms site. Replace the image link with the link to your new image.

<div class="wdn-band wdn-hero animated-hero">
    <div class="wdn-hero-text-container">
        <div class="wdn-hero-text">
            <h2 class="wdn-hero-heading"><span class="wdn-hero-initial-line">World's Largest Rodent</span> <span class="wdn-hero-impact-line">Capybara</span></h2>
            <a href="https://en.wikipedia.org/wiki/Capybara" target="_blank"class="dcf-btn dcf-btn-inverse-secondary">Learn More</a>
        </div>
    </div>       
    <div class="wdn-hero-picture">
        <img src="images/your-image-here" alt="Don't forget your alt tag!">
    </div>
</div>

3. Copy and paste the following "starter" CSS onto your test page. Experiment with different ways of animating the text in your browser. When you want to add it to your website, paste it into the CSS box in your appearance tab. Do not include the <style> tags. Need help?

<style>
	@keyframes text-slide {
		0% { 
			opacity: 0; 
		}
		100% {
			opacity: 1;
		}
	}

	.animated-hero .wdn-hero-text-container {
		animation: /* Define your animation here! */
	}
</style>