CSS Animation Grayscale to Color Photo

Developer
Marty Powell
Size
2,688 Kb
Views
26,312
  1. CSS Animation Grayscale to Color Photo Previews
  2. CSS Animation Grayscale to Color Photo HTML Codes
  3. CSS Animation Grayscale to Color Photo CSS Codes

How do I make an css animation grayscale to color photo?

Messing around with css animations using the webkit-filter.. What is a css animation grayscale to color photo? How do you make a css animation grayscale to color photo? This script and codes were developed by Marty Powell on 15 September 2022, Thursday.

CSS Animation Grayscale to Color Photo Previews
IQ Test

CSS Animation Grayscale to Color Photo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Animation Grayscale to Color Photo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="me"> <h2>Marty Powell</h2> <img src="https://lh4.googleusercontent.com/-y6Pf7wo1NQs/ThZtTKJLzuI/AAAAAAAAAQM/Fmkf78PxJY0/s453/n49602942_30632296_6352.jpg"/> <p>I am currently a web developer living in MD. I have experience with frontend and backend programming along with some database tasks. My real passion is creating cool “stuff” on the web.</p> <h2>My Skills</h2> <ul> <li>HTML, CSS, jQuery</li> <li>HTML, CSS, jQuery</li> <li>HTML, CSS, jQuery</li> <li>HTML, CSS, jQuery</li> <li>HTML, CSS, jQuery</li> </ul> <p>Bacon ipsum dolor sit amet ham hock tail brisket hamburger, pork jerky turducken pancetta pork belly pastrami. Kielbasa meatloaf beef beef ribs.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Animation Grayscale to Color Photo - Script Codes CSS Codes

@-webkit-keyframes myfirst { 0% { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 25% { filter: grayscale(75%); -webkit-filter: grayscale(75%); -moz-filter: grayscale(75%); -ms-filter: grayscale(75%); -o-filter: grayscale(75%); } 50% { filter: grayscale(50%); -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -ms-filter: grayscale(50%); -o-filter: grayscale(50%); } 75% { filter: grayscale(25%); -webkit-filter: grayscale(25%); -moz-filter: grayscale(25%); -ms-filter: grayscale(25%); -o-filter: grayscale(25%); } 100% { filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); }
}
div.me { width: 260px; background-color: #004C80; padding: 10px 20px 10px 20px;
}
div.me h2 { text-align: center; text-transform: uppercase; color: white;
}
div.me img { display: block; width: 220px; height: 220px; text-align: center; padding: 10px; background-color: white; margin: 0 auto; -webkit-animation: myfirst 5s;
}
div.me p { color: white;
}
div.me p:first-letter { font-size: 2em; font-weight: bold;
}
CSS Animation Grayscale to Color Photo - Script Codes
CSS Animation Grayscale to Color Photo - Script Codes
Home Page Home
Developer Marty Powell
Username martypowell
Uploaded September 15, 2022
Rating 3
Size 2,688 Kb
Views 26,312
Do you need developer help for CSS Animation Grayscale to Color Photo?

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!

Marty Powell (martypowell) Script Codes
Name
A Pen by Marty Powell
Slick Carousel Prototype
News Snippet
Flickr API Example
Search and Filter
Logo
Font Awesome Social Icon List
Product Information Section
Ellipsis Animation
John Deere News Release Redesign
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!