How To Set Animation Duration In Css To Infinite
The most basic blithe effects in CSS tin exist achieved through properties liketransform andtransition. However, the CSS Animations Level ane working typhoon provides a more complex environment by utilizinganimation and@keyframes properties to achieve perpetual blitheness effects. This is best understood through a definitive example.
Specifying blitheness rules using @keyframes
The@keyframes rule is used to specify the animation beliefs we wish to utilize to an animation identifier in the folio layout. The identifier is specified throughanimation-name or by using theanimation: name; shorthand.
@keyframes change-color { from { background-color: #fff; } to { background-color: #000; } } In this context, the example above will change the background-color from white to black over the duration of the animation.from refers to the beginning (0%) andto refers to the end (100%). So, the rule tin can as well be rewritten with percentage values.
@keyframes modify-color { 0% { background-colour: #fff; } fifty% { groundwork-color: #f3f3f3; } 100% { background-color: #000; } } On its own, this won't do anything unless nosotros specify the element we wish to animate. Furthermore, you as well have to specifyanimation-elapsing since the default value is 0.
.container { width: 100vh; meridian: 100vh; animation-name: alter-color; animation-duration: 5s; /* we tin also rewrite this using a autograph blitheness: modify-color 5s; */ } We tin can then call our container using a div and the outcome would be this:
Typically, most CSS animations written in pure CSS use shorthand because it saves writing multiple lines of the animation logic. Every bit such, here is a reference forblitheness property values:
animation-name: name; // the name of the specific animation (to animate with @keyframes) animation-duration: 10s; // the duration animation-timing-role: linear; // the veolcity curve for the animation blitheness-filibuster: 1s; // ready a filibuster for the animation playback animation-iteration-count: infinite; // prepare it to an space loop animation-direction: alternate; // back and forth, use normal for default direction animation-fill-mode: both; // direction to use the style animation-play-state: paused; // too accepts 'running'
Further reading
If you would like to learn more than nearly CSS animations in-depth, hither are my recommended resource:
- Codrops CSS Reference – This is an extensive reference written and organized past Sara Soueidan (@SaraSoueidan) and contains in-depth examples of how certain CSS properties work.
- MDN CSS Animations – An extensive documentation-style introduction to CSS animations on the MDN Web Docs page.
- Introduction to cubic-bezier() – An in-depth article written past Temani Afif (@ChallengesCss) for CSS-Tricks on the usage of
cubic-bezier()property to create advanced CSS animations.
Examples of CSS Animations
The best way to learn anything is through examples. The following section is dedicated entirely to diverse effects achieved through CSS blitheness properties.
Moving ridge
The wave animation is created past first cartoon an SVG path for a wave design then assigning an ID to it. Later, we specify ivnth-kid classes with customanimation-delay andanimation-duration variables. Each variable represents an individual wave inside the animation, and each moving ridge tin be styled independently.
The advantage of defining the pattern with SVG is that the code becomes easily reusable.
If y'all wait at the path that nosotros have drawn, we specify four dissimilar layers for the moving ridge (using a custom axis) and then reference the#wave-pattern id that we gear up for the initial path. This is where you can also change the colour appearance of each moving ridge.
HTML
<div grade="your-container"> <svg class="css-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="wave-pattern" d="G-160 44c30 0 58-18 88-18s 58 18 88 xviii 58-18 88-18 58 18 88 eighteen v44h-352z" ></path> </defs> <yard course="animated-waves"> <use href="#wave-pattern" x="48" y="0" fill="rgba(155,255,255,0.7"></utilise> <use href="#wave-pattern" 10="48" y="three" fill="rgba(155,255,255,0.v)"></use> <utilise href="#wave-design" ten="48" y="5" fill="rgba(155,255,255,0.3)"></use> <apply href="#wave-pattern" x="48" y="seven" fill="rgba(155,255,255,0.3)"></use> </g> </svg> </div>
CSS
.css-waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-tiptop: 150px; } /* Here we declare the SVG node that we wish to animate. */ .animated-waves > apply { animation: infinite-waves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .animated-waves > use:nth-kid(1) { blitheness-delay: -2s; animation-duration: 7s; } .animated-waves > employ:nth-child(ii) { blitheness-filibuster: -3s; animation-duration: 10s; } .animated-waves > use:nth-child(iii) { animation-filibuster: -4s; blitheness-duration: 13s; } .animated-waves > utilise:nth-child(4) { blitheness-filibuster: -5s; animation-duration: 20s; } @keyframes infinite-waves { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Mobile Optimization */ @media (max-width: 768px) { .css-waves { height: 40px; min-height: 40px; } } Loading Text
This loading effect is relatively easy to implement because it uses only a scattering of applied animation properties. Showtime, you desire to specifycontent: attr() value which you lot and so apply to the text element you wish to animate. Later, you specify the animation itself, which in our case isanimation: loading 5s linear infinite;.
The elapsing of the loading result can be modified by changing the 5s property. And lastly, we use@keyframes to phone call the loading animation and modify its width from 0% to 100% over that 5s period. The higher the value of animation elapsing, the slower the loading effect.
The specific use cases for an animation like this are transition effects for page loads, just also a reliable solution for awarding projects when you don't want to rely on whatever libraries.
HTML
<!-- the loading-text grade is specified through the content: attr(); property. change the value name to implement multiple design variations, or reuse the same class to bear witness the loading effect in other parts of your design --> <h2 loading-text="Loading...">Loading...</h1>
CSS
h2 { position: relative; font-size: 5em; colour: rgb(199, 255, 110); text-transform: uppercase; border-bottom: 10px solid #ffffff; line-height: initial; } h2::before { content: attr(loading-text); position: accented; top: 0; left: 0; width: 100%; colour: #b0a8e2; overflow: hidden; edge-lesser: 10px solid #b0a8e2; animation: loading 5s linear infinite; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } } Text Moving ridge
I of the first things you'll discover about this animation is itsfluidity. This is possible because we apply thecalc() function to mathematically calculate each transition. Since nosotros write the animation in pure CSS we have to use multiplespan elements to specify each consecutive letter in the animation.
Every bit for modifying the depth of the moving ridge, get-go, you lot can change the duration from 3s to a lesser or greater number. Higher means the wave effect volition be slower and vice-versa. And, inside the@keyframes y'all can change the -24px specification to change the top of the wave.
The college the negative value, the more pronounced the wave effect.
HTML
<div form="blwb"> <span style="--i:1">O</span> <span fashion="--i:2">C</span> <span style="--i:iii">E</bridge> <span style="--i:4">A</span> <span fashion="--i:5">Due north</span> <span style="--i:6">.</bridge> <span style="--i:7">.</bridge> <bridge mode="--i:8">.</span> <bridge fashion="--i:9">Westward</span> <bridge style="--i:x">A</span> <span manner="--i:11">V</bridge> <bridge style="--i:12">E</bridge> <span way="--i:xiii">S</span> <bridge style="--i:fourteen">.</bridge> <span style="--i:15">.</span> <bridge style="--i:16">.</span> </div>
CSS
.text-moving ridge { margin: auto; display: flex; align-items: eye; justify-content: center; position: relative; } .text-wave bridge { position: relative; color: rgb(255, 255, 255); font-size: 40px; font-family: monospace; animation: wave 3s ease-in-out infinite; blitheness-delay: calc(.1s*var(--i)); } @keyframes wave { 0% { transform: translateY(0px); } 20% { transform: translateY(-24px); } 40%, 100% { transform: translateY(0); } } Pulse / Ripple Effect
Nosotros start by creating a container for the circumvolve we wish to apply the effect to. This is specific to the demo simply you lot can reuse the lawmaking for whatever other elements on your page. After, we create a class called.circumvolve which will serve every bit the animated ripple effect.
Two notable properties we use in this class areopacity: 0.5; andanimation: ease-out;. The opacity is what creates the illusion of having ripples/pulse, and the ease-out transition makes those ripples ease out of the original container.
Next, we accept our.circle grade and use to it thenth-of-type() property. For this case, we are using 3 individual circles which ease out of the original container. Within nth-of-blazon calls, we applyblitheness-delay with the values of -0.5s;-1s;-ane.5s. The higher the negative value the longer information technology will take for the furnishings to fully return.
And lastly, we utilize @keyframes to our specified pulse animation. In this example, we use thetransform: scale() holding. This defines the size of the pulses for each blitheness. The higher the value, the larger the outgoing ripples are going to appear.
HTML
<div grade="pulse-issue"> <div grade="circumvolve"></div> <div class="circumvolve"></div> <div class="circle"></div> <div form="circle"></div> </div>
CSS
.pulse-effect { background-colour: #f6efffa1; summit: 100px; width: 100px; border-radius: 100%; position: relative; margin: auto; } .circumvolve { position: absolute; groundwork-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.5; animation: pulse 3s ease-out infinite; } .circle:nth-of-blazon(1) { blitheness-delay: -0.5s; } .circle:nth-of-type(two) { animation-delay: -1s; } .circle:nth-of-blazon(iii) { animation-delay: -ane.5s; } @keyframes pulse { 100% { transform: scale(1.75); opacity: 0; } } Counter (Numbers)
The counter property is easy to overlook because typically you lot add together numbers to sure elements by hand. Nevertheless, it comes in handy when you want to practise in-depth nested assignments to menu items or large documentation pages.
Additionally, y'all tin put together an automated counter for blog post headings. E.1000. You are writing a review on multiple tools. And, best of all, the counter can be styled individually giving you more pattern freedom.
But, for this demo – we are focusing on using thecounter property to create an automated counter effect. So, let'south dig in and understand how it works. For this instance, nosotros start create a container that will contain the counter animation. You can customize this as you lot like. Next, we create our.count-numbers class which includes the animation syntax, in this instance, it isanimation: count-numbers 10s linear infinite forward;.
To suspension it down, nosotros specify the name for our animation, nosotros set the duration to 10 seconds, and we gear up theblitheness-direction to normal because we don't desire it to count dorsum from 10. Although, you can set up information technology to alternate if you wish for your counter to count astern, besides.
Moving on, we specify a new class called .count-numbers::earlier which we use to name our counter, in this case,content: counter(count);. This is important because the next step is to utilise the counter-name to animate the effect through@keyframes.
The last step is to write our specifications for the animation to render. In our demo, we count from ane to x, so we specify our @keyframes value from 0% to 100% in 10% increments. Each increase contains a counter-increment statement that likewise uses our counter-name:counter-increase: count 0;.
Then, at 0% our increment is set to 0 and at 10% information technology is set to 1 to project the result of a counter.
Likewise, try changing thecontent: counter(count); specification tocontent: counter(count, upper-roman); and run into what happens!
HTML
<main class="counter-container"> <div class="counter-card count-numbers"></div> </main>
CSS
.counter-container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(machine-fill up, minmax(15rem, 1fr)); margin: auto; max-width: 100%; padding: 2rem; } .counter-card { marshal-items: middle; border-radius: 10px; display: flex; meridian: 15rem; justify-content: center; position: relative; width: 100%; } .count-numbers { animation: count-numbers 10s linear infinite frontwards; background-color: #f3f3f3; counter-reset: count 0; } .count-numbers::before { colour: #000; content: counter(count); font-size: 5rem; } @keyframes count-numbers { 0% { counter-increment: count 0; } x% { counter-increment: count 1; } twenty% { counter-increase: count ii; } 30% { counter-increase: count 3; } forty% { counter-increment: count 4; } 50% { counter-increment: count v; } 60% { counter-increment: count half dozen; } lxx% { counter-increment: count 7; } 80% { counter-increment: count 8; } 90% { counter-increment: count ix; } 100% { counter-increment: count 10; } } Bouncing Ball
We begin by first creating a container for our ball, in this case, it is.ball-container.
Adjacent, we specify the size of the ball and fashion of its appearance using a combination of background colors and shadow effects. In our demo, we have gone for a more glowy effect, but yous can modify this to your own needs. And finally, we specify the animation, in this case, nosotros set up a duration to 5s and also applyease-in-out which means the transition has both a ho-hum kickoff and an end.
After the brawl is fatigued and the blitheness is set up, we can write our@keyframes rules. To achieve the bouncing issue, we usetransform: translatey(); in increments of 50%, and then 0% to 50% to 100%. The emphasis is on l% because hither we set the height of the bounce past specifyingtransform: translatey(-50px); – the bounce/float will be 50px in height (relative to the container). The higher the negative number, the higher the brawl is going to bounciness.
Likewise, specifying a smaller number volition reduce the size of the bounciness.
The last part is to add a shadow, although you tin remove this besides since it will accept no effect on the brawl animation itself. The only difference with the shadow is that we use thetransform: calibration() property to resize the shadow in a 2nd context. We gear up the values according to the scale of consequence nosotros wish to achieve.
HTML
<div class="ball-container"></div> <div class="ball-shadow"></div>
CSS
.ball-container { margin: auto; animation: floating 5s ease-in-out infinite; superlative: 100px; width: 100px; border-radius: 50%; position: relative; background: radial-gradient(circle at 75% 30%, rgb(107, 6, six) 5px, rgb(36, 187, 187) viii%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #d3f8c8, inset 88px 0px 60px #b4c3dd, inset -20px -60px 100px #5b43e7, inset 0 50px 140px #6bdf7e, 0 0 90px #fff; } @keyframes floating { 0% { transform: translatey(0px); } fifty% { transform: translatey(-50px); } 100% { transform: translatey(0px); } } .brawl-shadow { width: 95px; superlative: 30px; top: 50%; animation: expanding 5s infinite; position: relative; border-radius: l%; margin: machine; background: radial-gradient(circle at 75% 30%, rgb(221 215 243) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) sixty%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #3f51b500, inset 88px 0px 60px #ffffff99, inset -20px -60px 100px #5b43e791, inset 0 50px 140px #ffffff, 0 0 90px #39316b; } @keyframes expanding { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.75); } } Coin Flip
What I dear about this animation is that we tin set an incredibly precise rotation radius to achieve an consequence that feels like the coin is genuinely flipping. So, to get started you lot will need two images (I am using SVG for this demo, only normal photos work just as fine. Simply make sure to apply the correct course to each prototype.) and set them toopacity: 0;. Nosotros set information technology to 0 because later on on, we utilize@keyframes to alter their opacity then the images come up into the view at certain positions during the blitheness.
The.image-container class is used to specify the dimensions for the images inside the coin. Make certain you also specify this for the actual images, as shown in the snippet below. Adjacent, we specify.coin-mode which is the outer part (the money itself). Technically, you can set this to transparent but for the sake of a demo, we brand it visible.
The main concept for the.money-manner class is the way we add the animation, which in this case is: blitheness: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternating;.
The point of interest is thecubic-bezier() specification, which gives us the rotating curve issue for the coin container. This is practically incommunicable to write on your own, then my recommendation is to use any generator tool to render the desired curve upshot.
And lastly, inside our@keyframes we apply thescaleX() office to resize the money advent on ten-centrality basis. Even the almost minimal change to the values provided (in this demo) will alter how the "flip" effect appears.
I think the implementation below is as shut every bit information technology gets to perfect, simply maybe y'all can do better!
HTML
<div class="coin-style"> <div course="image-container"> <svg class="firstimage" width="88" top="88" viewBox="0 0 32 32" information-proper name="Layer 1" id="Layer_1" xmlns="http://world wide web.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path course="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.v,0,0,0,8.five,30h15A2.v,two.5,0,0,0,26,27.5V4.5A2.v,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M11.69,2a.47.47,0,0,0-.54.11l-v,5A.47.47,0,0,0,6,7.69.v.v,0,0,0,6.5,8h3A2.five,two.5,0,0,0,12,5.5v-3A.5.5,0,0,0,11.69,2Z" /> <path course="cls-three" d="M22.v,11a.five.five,0,0,0-.5.5v4.94l-.51-two.06a.52.52,0,0,0-1,0L20,16.44V11.5a.5.5,0,0,0-1,0v9a.51.51,0,0,0,.44.five.five.5,0,0,0,.55-.38l1-four.06,1,4.06a.five.5,0,0,0,.49.38h.06a.51.51,0,0,0,.44-.5v-9A.5.5,0,0,0,22.5,11Z" /> <path class="cls-3" d="M11.five,11h-2a.5.v,0,0,0-.5.5v9a.5.5,0,0,0,ane,0V17h1.11l.9,three.62a.51.51,0,0,0,.49.38h.12a.51.51,0,0,0,.37-.61l-.88-3.51A1.51,1.51,0,0,0,13,15.5v-3A1.5,1.5,0,0,0,11.5,11Zm.v,4.5a.5.5,0,0,1-.5.5H10V12h1.5a.5.5,0,0,1,.5.5Z" /> <path class="cls-3" d="M16,11a.5.five,0,0,0-.49.42l-ane.5,9a.49.49,0,0,0,.41.57.v.v,0,0,0,.57-.41L15.26,19h1.48L17,twenty.58a.49.49,0,0,0,.49.42h.08a.49.49,0,0,0,.41-.57l-1.five-9A.5.5,0,0,0,sixteen,11Zm-.58,7L16,14.54,sixteen.58,18Z" /> </svg> <svg grade="secondimage" width="88" height="88" viewBox="0 0 32 32" data-proper name="Layer one" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <defs> <fashion> .cls-ane { fill: #a08383; } .cls-2 { fill: #e1ebe9; } .cls-3 { fill: #770ba1; } .cls-4 { fill up: #0a5097; } </way> </defs> <path form="cls-one" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-five,5A.47.47,0,0,0,half-dozen,7.5v20A2.5,2.five,0,0,0,8.5,30h15A2.5,2.v,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M15,2h7a1,ane,0,0,1,0,2H15a1,1,0,0,one,0-2Z" /> <path grade="cls-2" d="M6,xiii.5v-2a1,one,0,0,1,two,0v2a1,1,0,0,one-2,0Z" /> <path class="cls-ii" d="M6,24.5v-8a1,one,0,0,1,2,0v8a1,1,0,0,1-2,0Z" /> <path course="cls-4" d="M21.5,15.5h-1A.5.5,0,0,1,20,15V12.5a.v.5,0,0,i,.five-.5h2a.5.five,0,0,0,0-1h-2A1.5,1.5,0,0,0,19,12.5V15a1.5,1.5,0,0,0,1.five,ane.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,i.v,0,0,0,23,19.5V17A1.5,i.5,0,0,0,21.5,15.5Z" /> <path form="cls-4" d="M15.five,12h2a.v.5,0,0,0,0-1h-2A1.5,one.5,0,0,0,fourteen,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.five.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.v.5,0,0,0,0,1h2A1.5,i.5,0,0,0,18,19.5V17a1.5,1.v,0,0,0-1.5-1.5h-1A.v.5,0,0,1,15,15V12.5A.5.five,0,0,1,fifteen.5,12Z" /> <path class="cls-4" d="M11,12a1,1,0,0,1,1,1,.5.5,0,0,0,ane,0,2,two,0,0,0-4,0v6a2,ii,0,0,0,4,0,.5.v,0,0,0-i,0,one,one,0,0,i-2,0V13A1,ane,0,0,1,11,12Z" /> </svg> </div> </div> CSS
svg { color: #151516; position: absolute; } svg.firstimage { opacity: 0; animation: logo-flip 2.5s linear infinite alternate; } svg.secondimage { opacity: 0; blitheness: logo-flip 2.5s linear 2.5s infinite alternate; } .image-container { position: relative; height: 88px; width: 88px; } .coin-style { background: rgb(233, 226, 226); width: 136px; peak: 136px; border-radius: 100%; margin: 0 machine; display: flex; justify-content: center; align-items: heart; box-shadow: 0px 15px 15px -19px rgb(255, 255, 255); blitheness: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) space alternating; } @keyframes coin-flip { 0% { transform: scaleX(0.95); } 100% { transform: scaleX(0.08); border-radius: fifty%; } } @keyframes logo-flip { 0% { opacity: 0; } 50% { opacity: 0; } 53% { opacity: 1; } 100% { opacity: 1; } } Slide-In
To make this animation work, nosotros use theanimation: ease-out; role in combination with a negative position value inside@keyframes. So, in this case we specify0% {opacity: 0;left: -700px;} which makes our slide-in element invisible at the beginning, simply also positioned 700px outside the container.
Afterward, we specify100% {opacity: 1;left: 0;} which past the time our animation is over (we have it prepare to 2 seconds) will render normal visibility, and position our chemical element back to its relative position.
An interesting affair to note is that this issue works inall directions.
If you lot desire to change the slide-in effect to appear from the right side, you lot need to change theleft:; values toright:; and vice-versa for positions similar peak and bottom. You tin also delay the blitheness by adjusting how long it takes for the element to slide-in.
A college value will irksome the animation downward.
HTML
<h2 id="slide-in" form="blitheness"> Slide-In Animation </h2>
CSS
.blitheness { position: relative; animation: animation 2s ease-out; } #slide-in { text-marshal: center; color: #fff; } @keyframes animation { 0% { opacity: 0; left: -700px; } 100% { opacity: i; left: 0; } } Hulk Issue
Start of all, what the heck is a Hulk? Every bit Ian Latchmansingh put it,"The Blob is an amorphous, pseudo-organic shape that's normally used to anchor landing pages visually. It usually serves as a mask or backdrop for an illustration. About 90% of the time the Hulk is filled with a gradient and sits on the lowest layer of a blueprint.". It certainly is one of the more common patterns in modern web blueprint. But, how do we animate it?
We start by creating a blob-effect container and also specify 3 individual span elements inside the container. We do this because we actually "depict" the blob ourselves using a combination of border and border-radius properties.
To achieve the varied issue, nosotros usenth-child to style each element individually. If you want to go funky with information technology, feel costless to modify the pct backdrop to adjust the blob advent.
The animation itself is achieved by usingtransform: rotate() property within a@keyframes specification. We fix it to 0 to 360 degrees considering this gives u.s.a. a perpetual event. The color overlay is done through:hover and lets the states set a custom background colour. And, additionally, we also create a separate container inside the hulk itself. This gives you the power to style individual parts of your page layout to take this specific animation effect.
HTML
<div course="hulk-upshot"> <span></span> <span></span> <bridge></span> <div form="div-container"> <a href="#">Hover</a> </div> </div>
CSS
.blob-consequence { position: relative; width: 200px; height: 200px; brandish: flex; justify-content: middle; align-items: center; } .blob-effect span:nth-child(1) { position: absolute; peak: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 5s linear infinite; } .blob-effect:hover bridge:nth-child(1) { background: #d76bb1; edge: none; } .blob-consequence span:nth-child(2) { position: absolute; height: 0px; left: 0px; width: 100%; tiptop: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 4s linear space; } .blob-effect:hover span:nth-kid(2) { background: #f192d0; border: none; } .blob-effect span:nth-child(3) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; edge: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob2 10s linear infinite; } .blob-result:hover span:nth-kid(iii) { background: #f06ec294; border: none; } @keyframes rotate-blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-blob2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .div-container { position: relative; padding: 40px 60px; color: #fff; text-align: center; transition: 0.5s; z-alphabetize: 10000; } .div-container p { color: #fff; } .div-container a { position: relative; display: inline-cake; margin-top: 10px; border: 2px solid #fff; padding: 6px 18px; text-ornamentation: none; color: #fff; font-weight: 600; edge-radius: 73% 27% 44% 56% / 49% 44% 56% 51%; } .div-container a:hover { background: #fff; color: #333; } Text Switch
Animation effects are typically reserved for creative web designs. And in this case, this text switch upshot will help to create a strong beginning impression for your site visitors. Ideal for header introductions, or if customized – can be used to showcase production features, etc.
The beginning thing we do is create a container for the actual outcome. Later on, we specify a new div grade that is going to incorporate the animation logic. In our case, nosotros utilize an 8s animation length, combined with 3 carve upanimation-delay specifications.
The delay is used to determine when a specific word is going to come into the view subsequently we add our@keyframes logic.
HTML
<div class="g-container"> <div class="word">Text</div> <div class="word">Switch</div> <div course="word">Animation</div> </div>
CSS
.thousand-container { position: relative; font-family: monospace; color: rgb(255, 255, 255); font-size: 4em; filter: contrast(fifteen); } .give-and-take { position: absolute; top: 50%; left: l%; transform: translate(-l%, -l%); animation: switch 8s space ease-in-out; min-width: 100%; margin: automobile; } .discussion:nth-child(1) { animation-delay: -7s; } .give-and-take:nth-child(2) { animation-delay: -6s; } .give-and-take:nth-child(3) { animation-delay: -5s; } @keyframes switch { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } l%, 80% { filter: blur(180px); opacity: 0; } } Hover Highlight
Admittedly, this specific effect does non use concrete blitheness properties. However, the usage ofattr() and thevar() function should be inspiring enough to try and farther customize this effect.
If y'all expect at theul li a::earlier specification – we employattr() to specify which chemical element we wish to attribute the upshot to. Additionally, nosotros add a variable called–clr which you use to set up a custom color for each item you wish to apply the hover effect.
For this instance, we accept as well addedborder-right property to betoken which color nosotros use for each of the elements. Yous can remove information technology and the effect will still work.
HTML
<ul> <li style="--clr:#a4e935"> <a href="#" hover-text=" Hover"> Hover </a> </li> <li style="--clr:#61cbb7"> <a href="#" hover-text=" Highlight"> Highlight </a> </li> </ul>
CSS
ul { position: relative; display: flex; flex-direction: inherit; gap: 25px; } ul li { position: relative; listing-mode: none; } ul li a { font-size: 2em; font-family: monospace; text-ornamentation: none !of import; letter-spacing: 0px; line-height: 1em; color: rgb(255, 255, 255); } ul li a::before { content: attr(hover-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: driblet-shadow(0 0 25px var(--clr)) } Source: https://stackdiary.com/css-animations/
Posted by: reagancitaks.blogspot.com
0 Response to "How To Set Animation Duration In Css To Infinite"
Post a Comment