Beispiel:CSS3 filter-animiert.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>animation + filter</title>
<style>
img {
-webkit-animation: filter-animation 5s infinite;
animation: filter-animation 5s infinite;
}
@-webkit-keyframes filter-animation {
0% {
-webkit-filter: sepia(0) saturate(2);
}
50% {
-webkit-filter: sepia(1) saturate(8);
}
100% {
-webkit-filter: sepia(0) saturate(2);
}
}
@keyframes filter-animation {
0% {
filter: sepia(0) saturate(2);
}
50% {
filter: sepia(1) saturate(8);
}
100% {
filter: sepia(0) saturate(2);
}
}
</style>
</head>
<body>
<h1>Verwendung von css-animation + filter</h1>
<figure>
<img src="https://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" width="450" height="450" alt="Lauf" >
<figcaption>animierte Filter</figcaption>
</figure>
</body>
</html>