#keyframes showAnimation {
to {
opacity: 1;
}
}
#keyframes ellipsis {
to {
width: 20px;
}
}
#keyframes hide {
to {
display: none;
}
}
#mixin points {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
content: '\2026';
width: 0px;
}
.findingAvailableRobot {
opacity: 0;
animation: showAnimation 3s 1s forwards;
&:after {
#include points;
animation: ellipsis steps(4, end) 900ms infinite, hide 0s 4s forwards;
}
}
findingAvailableRobot I'm trying to make anymation loading process , but also I want to stop this animation after some time , I've found that animation can take multiple keyframes , but it doesn't work , want to hide :after , after 4s seconds . Is it possible ? Or what I do wrong ?
Related
I found this question and associated answer: CSS hide element, after 5 seconds show it
However I am trying to hide element a, and reveal element b at the same time.
Please see my current code:
#showthiscolumn {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
#hidethiscolumn {
animation: cssAnimation 0s 5s forwards;
visibility: visible;
}
#keyframes cssAnimation {
to { visibility: hidden; }
}
The #hidethiscolumn element works, but #showthiscolumn content never appears.
You're overwriting your CSS animation. Use different animation names for different animations.
#showthiscolumn {
animation: cssAnimation1 0s 2s forwards;
visibility: hidden;
}
#keyframes cssAnimation1 {
to { visibility: visible; }
}
#hidethiscolumn {
animation: cssAnimation2 0s 2s forwards;
visibility: visible;
}
#keyframes cssAnimation2 {
to { visibility: hidden; }
}
<div id="showthiscolumn" style="background: tomato; width: 1rem; height: 1rem;"></div>
<div id="hidethiscolumn" style="background: coral; width: 1rem; height: 1rem;"></div>
Hello All^^ I have created a slide animation for an SVG logo that I have designed. Sliding the image to the left with a key frame animation on screen size using media queries was not difficult. However, I am unable to get the SVG to slide back to center (original position), via animation or transition delay, etc. Upon changing back to smaller media query sizes, the SVG simply jumps to its original position(main logo on the page).
I have not been able to find a way to resolve this. However, a link to a codepen is below. If you think you may be able to help, I would sincerely appreciate it. Thanks.
https://codepen.io/shaunbolak/pen/RwWmgVK
/* ============================================= */
/* SVG Keyframes */
/* ============================================= */
#keyframes offset {
100% {
stroke-dashoffset: 0;
}
}
#keyframes mobile-path-fill {
100% {
fill: $logo-main-path-color;
}
}
#keyframes fill-desktop {
100% {
fill: $logo-alternate-path-color;
}
}
#keyframes move-left {
100% {
transform: translateX(-118%);
}
}
/* ============================================= */
/* Main logo */
/* ============================================= */
#logo {
padding-top: 15px;
height: 150px;
width: 350px;
#include for-size(desktop-up) {
animation: move-left 2s forwards;
padding-top: 20px;
height: 120px;
width: 300px;
transition: width 1s;
}
#include for-size(larger-desktop-up) {
width: 350px;
transition: width 1s;
}
#include for-size(big-desktop-up) {
width: 400px;
transition: width 1s;
}
}
#logoFill {
fill: $logo-main-fill;
stroke: $logo-main-fill;
#include for-size(desktop-up) {
animation: fill-desktop 1.5s 1.2s forwards;
}
}
.logo-stroke {
stroke: $logo-main-path-color;
stroke-width: 1;
stroke-dasharray: 325;
stroke-dashoffset: 325;
animation: offset 3s linear forwards, mobile-path-fill 1.2s 3s forwards;
}
Add:
#keyframes move-right {
from {
transform: translateX(-118%);
} to {
transform: translateX(0);
}
}
And then:
#media (max-width: 1200px) {
#logo {
animation: move-right 2s;
padding-top: 20px;
height: 120px;
width: 300px;
transition: width 1s;
}
}
I've checked that and it works well...
I'm trying to create a visual transition between content changes in a toy SPA I'm writing. To that end, I define a simple class for animating the opacity of an element.
.fade {
transition: opacity 1.5s;
}
In my render function, I now change the opacity of my outlet div after content changes like so:
function render(content) {
var outlet = document.getElementById("outlet");
outlet.classList.remove("fade");
outlet.style.opacity = 0;
outlet.innerHTML = content;
outlet.classList.add("fade");
outlet.style.opacity = 1;
}
Unfortunately, the animation never fires. When I delay changing the opacity to 1 via setTimeout for 10ms, say, it works sometimes if I don't change the content again while the animation is still running, indicating a timing issue/race condition.
I used a similar approach in the past to fade out messages, but there I intentionally delayed changing the opacity by a few seconds so users could read the message before it starts fading out.
Pure CSS animation fadeIn
li {
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
}
.logo {
width: 300px;
height: 150px;
background: red;
margin-left: -150px;
z-index: 30;
-webkit-animation: fade-in-slogan 4s .2s ease-in forwards;
-moz-animation: fade-in-slogan 4s .2s ease-in forwards;
animation: fade-in-slogan 4s .2s ease-in forwards;
}
.menu {
width: 600px;
height: 150px;
background: blue;
margin-left: -300px;
opacity: 0;
-webkit-animation: fade-in-menu 3s 4s ease-out forwards;
-moz-animation: fade-in-menu 3s 4s ease-out forwards;
animation: fade-in-menu 3s 4s ease-out forwards;
}
#-webkit-keyframes fade-in-slogan {
0% { opacity: 0; }
30% { opacity: 1; }
50% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; }
}
#-webkit-keyframes fade-in-menu {
0% { display: block; opacity: 0; }
30% { display: block; opacity: .3; }
60% { display: block; opacity: .6; }
80% { display: block; opacity: .8; }
100% { display: block; opacity: 1; }
}
<ul class"main">
<li class="logo"></li>
<li class="menu"></li>
</ul>
Try this, I hope this will solve the issue
.fade{
animation-name: example;
animation-duration: 4s;}
#keyframes example {
from {opacity:1}
to {opacity:0;}
}
div{
width:200px;
height:200px;
background:#000;
}
<html>
<head>
</head>
<body>
<div class="fade"></div>
</body>
</html>
I've solved it now inspired by Muhammad's answer. I defined the fade class as follows:
.fade {
animation-name: fadein;
animation-duration: 1.25s;
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
Then in the render function, I do
function render(content) {
outlet.classList.remove("fade");
outlet.innerHTML = "";
setTimeout(() => {
outlet.classList.add("fade");
outlet.appendChild(content);
}, 100);
}
Even though this adds an additional delay before the new content actually starts to fade in, it seems the most elegant and concise solution to me.
The code below is a part of my code :
.myBox:hover::after {
animation-name: underline;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
It works nicley, but I want to do it vice versa when animation completed, I mean when it finished then width should be 0 again, In fact for this part I want to do it when my element is not hovered. Which property can help me ?
You need to use alternate and run 2 iterations of the animation:
.box {
height:200px;
background:red;
animation: underline 500ms alternate 2 forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
<div class="box">
</div>
Or consider the use of transition if you want the effect on hover:
.box {
height: 200px;
background: red;
width: 0;
transition: 500ms;
}
body:hover .box {
width: 100%;
}
<div class="box">
</div>
You can specify multiple values for animations rather then from and to using percentage:
#keyframes underline {
0%, 100% { width: 0; }
50% { width: 100%; }
}
More detailed information can be found here.
.myBox:hover::after {
animation-name: underline infinite;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
You infinite for this
I currently have 3 animations, which I call like this:
animation: 225ms radius-in forwards,
75ms opacity-in forwards,
150ms opacity-out;
Is there a way, using pure css, to delay the "opacity-out" animation, until the radius-in animation is done?
Thanks in advance!
I added a delay of 4 secs to the final animation below. For visibility purpose, I set the duration of each animation to 2 secs.
div {
width: 200px;
height: 200px;
opacity: 0.3;
background-color: darkgray;
animation:2000ms radius-in forwards, 2000ms opacity-in forwards, 2000ms 4000ms opacity-out forwards;
}
#keyframes radius-in {
from { border-radius: 0; }
to { border-radius: 25px; }
}
#keyframes opacity-in {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes opacity-out {
from { opacity: 1; }
to { opacity: 0.3; }
}
<div></div>