Menu
In my website I want to have a header that fades in and out, then in with different text, then out, then back to normal (looped). Here's how I would like it to work:
h1 {
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}
However, I haven't found any way to change the text within a CSS3 animation. Is this possible?
499
With some of the newer text-decoration- properties, we can animate the actual underlines — far superior to just letting our underlines blink in and out of existence on hover.
Animating your Transforms When the mouse moves away the animation is reversed, taking each box back to its original state. If you think that's cool, realise that CSS Animation can be applied not just to the transforms, but also to other CSS properties including: opacity, colour and a bunch of others.
CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes. animation-name.
Hour ago, been stuck with same question but my decision is this. Just pasted a part of my own code. Check it out, guys!
body {
margin: 0;
font-family: sans-serif;
}
#wrapper {
background-color: #051E3E;
height: 100vh;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#hi {
animation: pulse 5s;
}
@keyframes pulse {
0% {
color: #051E3E;
}
10% {
color: #051E3E;
}
30% {
color: white;
}
50% {
color: #051E3E;
}
60% {
color: #051E3E;
}
80% {
color: white;
}
100% {
color: #051E3E;
}
}
#hi:after {
content: "";
animation: spin 5s linear;
}
@keyframes spin {
0% { content:"Hi"; }
100% { content:"How do you like it?"; }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<p id="hi"></p>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
