Basic HTML5 Animated MREC Ad Example
Banner
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
About This Ad Tag Example
A bright modern HTML5 animated Medium Rectangle (MREC) ad example that utilizes CSS3 animations to capture the audience's attention. Advertising ticket sales for events and promotions. This ad is optimized for performance and cross-browser compatibility.
Key Features
Basic CSS3 animations
Optimized for performance
Cross-browser compatibility
Lightweight (< 10KB)
Half Page (300x600)
Code Sample for this Banner Ad
Below is the code implementation for this ad. You're free to copy and use this as needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ad Creative - Medium Rectangle</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.ad-container {
position: relative;
width: 300px;
height: 250px;
background-color: #ffffff;
border: 3px solid #fd5335;
box-sizing: border-box;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
.ad-container {
cursor: pointer;
transition: all 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
@keyframes zoomOut {
from { opacity: 0; transform: scale(1.2); }
to { opacity: 1; transform: scale(1); }
}
@keyframes zoomInInfinite {
from { transform: scale(1); }
to { transform: scale(1.3); }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes rotateIn {
from { opacity: 0; transform: rotate(-180deg) scale(0.8); }
to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes blurInLeft {
from { opacity: 0; filter: blur(8px); transform: translateX(-30px); }
to { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@keyframes blurInRight {
from { opacity: 0; filter: blur(8px); transform: translateX(30px); }
to { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@keyframes blurInUp {
from { opacity: 0; filter: blur(8px); transform: translateY(30px); }
to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes blurInDown {
from { opacity: 0; filter: blur(8px); transform: translateY(-30px); }
to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes fadeOutAfter {
to { opacity: 0; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes keyframeCTAButtonHover {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.element-shape-1764713315494 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 250px;
background-color: #fd5335;
}
.element-image-1764707618861 {
position: absolute;
left: -60px;
top: 0px;
width: 240px;
height: 250px;
animation: blurInLeft 2600ms ease-out 0ms both;
background-image: url('https://images.pexels.com/photos/3721080/pexels-photo-3721080.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-shape-1764707645868 {
position: absolute;
left: 140px;
top: 0px;
width: 160px;
height: 250px;
background-color: #fd5335;
}
.element-text-1764706765013 {
position: absolute;
left: 146px;
top: 9px;
width: 148px;
height: 36px;
animation: slideDown 600ms ease-out 300ms both;
color: #ffffff;
font-size: 26px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764706803505 {
position: absolute;
left: 155px;
top: 45px;
width: 130px;
height: 30px;
animation: slideUp 600ms ease-out 500ms both;
color: #ffffff;
font-size: 28px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764706842500 {
position: absolute;
left: 155px;
top: 107px;
width: 130px;
height: 60px;
animation: blurInUp 600ms ease-out 900ms both;
color: #ffffff;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-button-1764706868498 {
position: absolute;
left: 150.1875px;
top: 183px;
width: 139.625px;
height: 46px;
background-color: #ffffff;
color: #ff6569;
font-size: 16px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
font-weight: bold;
justify-content: center;
cursor: pointer;
border: none;
text-decoration: none;
transition: opacity 200ms ease, transform 200ms ease-in-out, filter 300ms ease-in-out;
border-radius: 50px;
}
.element-button-1764706868498.hover-active:hover {
transform: scale(1.05);
}
.element-button-1764706868498.animate-in {
animation: blurInDown 600ms ease-out 1000ms both;
}
.element-text-1764712896388 {
position: absolute;
left: 155px;
top: 72px;
width: 130px;
height: 30px;
animation: slideUp 600ms ease-out 500ms both;
color: #ffffff;
font-size: 28px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.cta {
animation: pulse 2s ease-in-out 0.6s infinite;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="window.open(window.clickTag)">
<div class="ad-container">
<div class="element-shape-1764713315494"></div>
<div class="element-image-1764707618861"></div>
<div class="element-shape-1764707645868"></div>
<div class="element-text-1764706765013">Montsalvat</div>
<div class="element-text-1764706803505">Historical</div>
<div class="element-text-1764706842500">Your summer family adventure!</div>
<div class="element-button-1764706868498 animate-in cta">BUY TICKETS</div>
<div class="element-text-1764712896388">Landmark</div>
</div>
</a>
<script>
// Ad server replaces this value
var clickTag = "https://example.com";
</script>
<script>
const allButtons = document.querySelectorAll("[class*='element-button-']");
allButtons.forEach(button => {
if (button.className.includes('animate-in')) {
button.addEventListener('animationend', () => {
button.classList.add('hover-active');
button.classList.remove('animate-in');
});
} else {
button.classList.add('hover-active');
}
});
</script>
</body>
</html>Banner
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
Technical Details
Dimensions300x600
File Size7KB
Duration15s
IAB CategoryEvents
Tags
html5
css3
animation
interactive
banner
half-page
