I have a CSS class for flickering animation and can't find a way to not apply it on child buttons inside.
Tried animation: none !importnant but had no luck.
#keyframes blinker {
50% {
opacity: 0;
}
}
.useBliinker {
border: 0.1em dashed #ff6a00;
animation: blinker 1s linear infinite;
}
.useBliinker>button {
animation: none !important;
transition: none !important;
}
<div class="useBliinker">
<button>Button</button>
</div>
You can't exclude children from an animation, since you're animating their container as a whole; it's the same as opacity, etc.
You can just animate the border-color instead:
#keyframes blinker {
50% {
border-color: #ff6a00;
}
}
.useBliinker {
border: 0.1em dashed transparent;
animation: blinker 1s linear infinite;
}
<div class="useBliinker">
<button>Button</button>
</div>
Alternatively, you can also animate a psuedo-element instead:
#keyframes blinker {
50% {
opacity: 0;
}
}
.useBliinker {
padding: .1em;
position: relative;
}
.useBliinker::after {
animation: blinker 1s linear infinite;
border: .1em dashed #ff6a00;
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
<div class="useBliinker">
<button>Button</button>
</div>
you can only do it with border
#keyframes btnBorder {
50% {
border-color:transparent;
}
}
.useBliinker {
padding: .1em;
animation: btnBorder 1s linear infinite;
border: .1em dashed #ff6a00;
}
<div class="useBliinker">
<button>Button</button>
</div>
Related
I have created sample
CodePen here.
I tried below but didn't work.
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
As you will see this sample has 3 images. I give them id = "imge1", "imge2", "imge3"
img3 keeps rotating using keyframe.
I need to show img1 and img2 showing kinda fadein-fadeout effect.
so when img3 rotates to bottom that time may be fadeout img1 and fadeIn img2. (or other way around is fine)
basically 2 images should keep replacing with some fade effect and img3 keeps rotating.
Here is a link I tried but could not achieve solution.
CSS animation, fade in fade out opacity on automated slideshow
CSS how to make an element fade in and then fade out?
also, this needs to be done using pure-css only. I have to put this in nextjs project.
Thanks
You need animation-delay and animation-iteration-count to achieve that
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
figure{
width: 100vw;
height: 50vh;
position: relative;
background: green;
text-align: center;
}
picture{
position: relative;
display: inline-block;
width: 25%;
}
picture img{
width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
background: red;
animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
background: red;
animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
animation: spin 4s linear infinite;
}
figcaption{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}
#keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes spin {
to { transform: rotate(360deg);}
}
<figure>
<picture>img1</picture>
<picture>img2</picture>
<picture>
<img class="img3" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</picture>
<figcaption>Css Labs</figcaption>
</figure>
See below. I added a background color to the third image to make it visible.
#img3 {
background-color: red; /* to make it visible */
}
.flexDisplay {
display: flex;
}
.wrapper {
display: flex;
justify-content: space-evenly;
}
.loginImage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.img1 {
animation: spin 3s linear infinite;
opacity: 0.1;
width: 200px;
height: 200px;
align-items: center;
}
.elementToFadeInAndOut {
width: 200px;
height: 200px;
background: red;
animation: fadeinout 4s linear infinite;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<div class="flexDisplay">
<div class="wrapper">
<img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png " class="loginImage" alt="branding logo" />
<img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />
<img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</div>
</div>
Basically, you need to apply 2 different animation functions to the different elements.
I have used z-index to let the images overlap each other and
set the infinite property for the duration of your animation.
You can set an interval for your images using animation-delay.
.flexDisplay{
display: flex;
background: #f1f1f1;
}
.wrapper{
display: flex
}
.img1{
z-index:3;
}
.loginImage1{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:1;
}
.loginImage2{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:2;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.img1{
animation: spin 3s linear infinite;
width: 200px;
height: 200px;
align-items: center;
}
.img2{
position: relative;
width: 200px;
height: 200px;
}
.elementToFadeInAndOut1 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
}
#-webkit-keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.elementToFadeInAndOut2 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
animation-delay:5s;
}
#-webkit-keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Created this pen: https://codepen.io/spaceCadett/pen/wvKKowL
I am trying to get the typing animation effect to continue one line at a time when the size of parent container forces the text to span multiple lines.
/* The typing effect */
#keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: green;
}
}
.animated-text {
font: bold 1.45em monospace;
color: black;
border-right: 0.6em solid;
overflow: hidden; /* Ensures the content is not revealed until the animation */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
animation: typing 3.5s steps(40, end), blink-caret 0.9s step-end infinite;
}
.container {
border: 10px solid;
position: absolute;
width: 25%;
height: 32%;
left: 35%
}
<div class='container'>
<h1 class='animated-text'>The typing effect should continue line by line at a time when the text needs to wrap</h1>
</div>
I've been searching for the answer to this question as well.
The closest I could find was this - multiline typewriter effect. However, you have to manually set the width of each p tag. I've yet to find a way to dynamically set the width of each line.
All lines except for the last line uses border-right to display the typewriter effect, only the last line has blink animation which is the typewriter cursor.
<div class="css-typing">
<p>
Hi I'm Jenssen Lee! Looking to start my career as a Front-End Developer in Singapore.
</p>
<p>
I have experience with HTML, SASS, Bootstrap, JavaScript, jQuery, React, Node.js, Express.
</p>
<p>
This site was designed and built by me - the code is available on Github.
</p>
</div>
.css-typing p {
border-right: .15em solid orange;
font-family: "Courier";
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 780px; /* manually set width */
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 780px; /* manually set width */
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
width: 620px; /* manually set width */
opacity: 0;
-webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
animation: type3 2s steps(20, end), blink .5s step-end infinite alternate;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes blink {
50% {
border-color: transparent;
}
}
#-webkit-keyframes blink {
50% {
border-color: tranparent;
}
}
I am using CSS keyframes to animate two separate text.
The problem which I am facing is that the text of first span element ("first text") on 100% animation completion appears suddenly instead of second span element text fliping after the completion of "first text".
.c--anim-btn {
height: 40px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #ffffff;
}
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c-anim-btn {
animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#keyframes rotateWord {
0% {
margin-bottom: 0rem;
}
25% {
margin-top: 0rem;
}
40% {
margin-top: -4rem;
}
100% {
margin-top: -4rem;
}
}
<div class="c--anim-btn">
<span class="c-anim-btn">First Text</span>
<span>Second Text</span>
</div>
jsFiddle
Try to change the css property to the following, in order to keep the final state of the animation:
.c-anim-btn{
animation: rotateWord 3s forwards;
-webkit-animation: rotateWord 3.0s forwards
}
I have changed a little your keyframes, may be this is what you want
.c--anim-btn {
height: 40px;
font: normal normal 700 1em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
background-color: #ffffff;
}
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c-anim-btn{
animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2){
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#keyframes rotateWord {
0%, 25% {
margin-top: 0rem;
}
40%, 75% {
margin-top: -4rem;
}
100% {
margin-top: 0rem;
}
}
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
I'm having a hard time making this preloader animation in CSS.
This is what I'm trying to make.
What am I doing wrong?
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
html, body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
Use step-end:
animation: pulse .8s infinite step-end;
body{
padding-top: 40px; /* for demonstration purpose */
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite step-end;
animation-delay: .2s;
}
.m {
animation: pulse 2s infinite step-end;
animation-delay: .4s;
}
.r {
animation: pulse 2s infinite step-end;
animation-delay: .6s;
}
#keyframes pulse {
0% { transform: scale( 1 ); }
50% { transform: scale( 2 ); }
100% { transform: scale( 1 ); }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
JSFiddle
Now just adjust the animation duration and delay time to make it more like in the OP.
Update: use transform: scale() to make the circle expand from its centar - reference
I have extra frames to the animation. Check below answer.
html,
body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.5em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite linear;
}
.m {
animation: pulse 2s infinite linear;
animation-delay: .3s;
}
.r {
animation: pulse 2s infinite linear;
animation-delay: .6s;
}
#keyframes pulse {
10% {
transform: scale(1);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.7);
}
50% {
transform: scale(1.7);
}
70% {
transform: scale(1.7);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
I have an ul. With javascript I add the li's to it. I need the added li with background-color #E4F3D6 then 10 seconds later change to #DDD as final color.
I know this is possible with animation and transition-delay but I don't figure out how.
I wrote this but doesn't work properly:
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-webkit-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-moz-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
/*transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease;
-moz-animation: change-color 2s ease;
animation: change-color 2s ease;
}
Here a demo: https://jsfiddle.net/junihh/a657pd6q/4/
Anyone help me, please.
Set the transition-delay property in the CSS for the element itself:
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
The above uses the shorthand alternative for the animation property:
animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode>
The animation-delay property does precisely what its name suggests, it delays the start of the animation by the value specified (here 5s, five seconds); the animation-fill-mode property causes the final values of the animation to persist once the animation has completed:
document.getElementById('add').addEventListener('click', function() {
var li = document.createElement('li');
li.innerHTML = '<div class="test"></div>';
document.getElementById('container').appendChild(li);
}, false);
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
#container {
width: 200px;
margin: 20px auto 0;
padding: 15px;
background-color: #FFF;
border: solid 1px #DDD;
}
#container li {
background-color: #DDD;
margin-bottom: 4px;
}
#container li:last-child {
margin-bottom: 0;
}
.button-box {
margin: 20px auto 0;
width: 100px;
}
#add {
width: 100%;
padding: 10px 0;
background-color: #666;
cursor: pointer;
font-size: 14px;
color: #FFF;
}
#add:active {
background-color: #333;
}
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
<ul id="container">
<!-- li's -->
</ul>
<div class="button-box">
<button type="button" id="add">Add row</button>
</div>
JS Fiddle demo.
Note that, in the demo, I've used a final colour of #f90 instead of #ddd simply to make the animation more obvious (the difference between the start and end colours, otherwise, are easy to miss).