Subtle Background Image Animation

Developer
Rich Wertz
Size
1,734 Kb
Views
8,096
  1. Subtle Background Image Animation Previews
  2. Subtle Background Image Animation HTML Codes
  3. Subtle Background Image Animation CSS Codes

How do I make an subtle background image animation?

Capture the attention of visitors with a subtle animation effect applied to a background image.. What is a subtle background image animation? How do you make a subtle background image animation? This script and codes were developed by Rich Wertz on 29 January 2023, Sunday.

Subtle Background Image Animation Previews
IQ Test

Subtle Background Image Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle Background Image Animation</title> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/base_blackBG.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <h1>Hello</h1>
</main>
</body>
</html>

Subtle Background Image Animation - Script Codes CSS Codes

main { position: relative; display: block; width: 100%; height: 100%; overflow: auto; background-repeat: no-repeat; background-position: center center; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/brush-stroke_bg.jpg'); -webkit-animation: animateBackground infinite ease-in-out 45s;
}
@-webkit-keyframes animateBackground { 0% { background-size: 100% auto; } 50% { background-size: 200% auto; } 100% { background-size: 100% auto; }
}
h1 { text-align: center;
}
Subtle Background Image Animation - Script Codes
Subtle Background Image Animation - Script Codes
Home Page Home
Developer Rich Wertz
Username richwertz
Uploaded January 29, 2023
Rating 3
Size 1,734 Kb
Views 8,096
Do you need developer help for Subtle Background Image Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rich Wertz (richwertz) Script Codes
Name
Animated Menu Effect
SCSS basics
Reduce Navigation Interaction Voids
Hamburger Menu Animation
Color Palette Changer
A Pen by Rich Wertz
Dynamic Animated Effect
JQuery1
Video-background
Transitioning Backgrounds
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!