I have this:
.about5 {
animation: fade 4s ease forwards, warp 1s linear;
animation-delay: 2s;
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(95deg);
}
}
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
}
<div class="about5">About</div>
<div class="about">About text etc</div>
Why, when I have separated multiple animations by a comma, will the second animation:
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg)
rotateZ(29deg) rotateY(-180deg);
}
}
#media (min-width: 768px) {.about {
animation:
spin 20s linear infinite, warp 2s linear infinite; animation.
delay: 4s;}}
not take effect?
I want aboutelement to spin and translateZ but it's not working. Is this because of the comma in the wrong place?
It works ok, your problem must be in another place:
.about5 {
animation: fade 16s ease forwards infinite, warp 4s linear infinite;
animation-delay: 2s;
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
<div class="about5">About</div>
<div class="about">About text etc</div>
Related
This is my first question on this platform.
I am trying to make anki card that shows a question for a number of seconds then I need it to fade out.
this is the code that I have found.
#-webkit-keyframes fadeIn {
100%,0%{opacity:.5;}
0%,0%{opacity:1;}
}
.fade-out {
font-size:20px;
color: dodgerblue;
background:white;
padding:10px;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-webkit-animation-delay:4s;
This kind of stuff is usually easy to just google, but anyways this is a solution that will work perfectly
.fader {
animation: fadeOut ease 8s;
-webkit-animation: fadeOut ease 8s;
-moz-animation: fadeOut ease 8s;
-o-animation: fadeOut ease 8s;
-ms-animation: fadeOut ease 8s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
<h1 class="fader">
Hey!
</h1>
You can make an animation with the #keyframes tag. For instance
#keyframes fade-out {
100%{
opacity: 0%;
}
}
and then also in your CSS you have something like this:
.your-class{
animation: fade-out 3s linear 10s 1;
animation-fill-mode: forwards;
}
And then in your HTML you have this:
<div class="your-class">What is 1+1?</div>
The values in the CSS mean that the "fade-out" animation will be played in a 3s time and a linear animation. The 10s mean that after 10s the animation will play, so it means that the card will disappear after 10s. and the "1" means it will only play 1 time, this is optional since 1 is the default value.
animation-fill-mode means that the value that's in the animation (opacity: 0%) will remain and only goes away when you refresh the page for instance. It will overtake the default value which is normally 100%;
Hoped this helped you.
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 2 years ago.
Is there a CSS only way to fade-out this text as below and have it stay hidden once the animation completes? It currently fades out, then appears again. I have tried adding display: none (as well as height: 0px, which isn't really what I want), but the issue remains - it re-appears once the animation completes.
Happy to use some JavaScript to do this (there is a stack overflow answer explaining how to listen out for the end of the animation event), but pure CSS is preferred.
.fade-out {
animation: fadeOut ease 5s;
-webkit-animation: fadeOut ease 5s;
-moz-animation: fadeOut ease 5s;
-o-animation: fadeOut ease 5s;
-ms-animation: fadeOut ease 5s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>
Use animation-fill-mode: forwards; for that purpose:
.fade-out {
animation: fadeOut ease 5s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>
I want to create "roll in" effect with image of 8-ball. I want this animation to load on page load and to end then ball reaches text layer that's in the middle (of revolution slider).
On codepen I found similar thing that I have used and achieved result at some point but animation goes infinite. The question is, how to achieve that ball stops when it reaches text layer?
This is what I've got so far:
.circle {
display: block;
width: 100px;
height: 100px;
background: none;
border-radius: 50%;
/* Animation to spin and move the sphere */
-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-webkit-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0;
}
/* Spinning the sphere using key frames */
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Move sphere from left to right */
#-moz-keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
#-ms-keyframes moveLeftToRight {
0% {
left: -50px;
}
50% {
left: 50%;
}
}
#keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
#-webkit-keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
<img class="circle" src="https://i.imgur.com/1KfVzUa.png" />
You need to add the fill-mode to freeze the animation state at the end of the animation.
-webkit-animation-fill-mode: forwards;
forwards leaves the animation in the state of the last frame
backwards leaves the animation at the start
Hello I have an image inside a div, and when that div is hovered over I would like the image to "swing" smoothly.
I am very close, I have the image swinging but I cant get it to loop smoothly, it pauses after the animation is done for a small amount of time.
Can anyone help me finish the animation where it loops smoothly without any pauses?
Thanks!
Here is the code:
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg">
</div>
#keyframes swinging{
0%{transform: rotate(0deg);}
25%{transform: rotate(10deg);}
75%{transform: rotate(-10deg);}
100%{transform: rotate(0deg);}
}
.box:hover img {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 2s ease-in-out forwards infinite;
animation: swinging 2s ease-in-out forwards infinite;
}
And the jsfiddle
here
You can easly achieve that by changing the animation from ease-in-out to linear
#keyframes swinging{
0%{transform: rotate(0deg);}
25%{transform: rotate(10deg);}
75%{transform: rotate(-10deg);}
100%{transform: rotate(0deg);}
}
.box img {
width: 300px;
height: auto;
}
.box:hover img {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 2s linear forwards infinite;
animation: swinging 2s linear forwards infinite;
}
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>
Or in addiction you can try playing with cubic-bezier(P0, P1, P2, P3) for making your own animation
#keyframes swinging {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(10deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
.box img {
width: 300px;
height: auto;
}
.box:hover img {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
}
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>
Did a few edits. Changed the % transform & animation.
#keyframes swinging {
0% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
.box img {
width: 300px;
height: auto;
}
.box:hover img {
-webkit-transform-origin: 50% 0;
/* for Safari and older Chrome */
transform-origin: 50% 0;
-webkit-animation: swinging 2s ease-in-out forwards infinite;
animation: swinging 2s ease-in-out forwards infinite;
}
<div class="box">
<img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>
I would like the delay the start of the following command and would appreciate any recommendation(s). I am a beginner at this and Thank you in advance.
Sample Text
Use animation
Refer animation css
You can delay the animation by setting the animation-delay: the time between the element being loaded and the start of the animation sequence.
In our code animation delay is set as 3s -webkit-animation: fadeout 5s linear 3s forwards;
.fadeOut {
width: 200px;
height: 200px;
background: #191970;
color: #fff;
-webkit-animation: fadeout 5s linear 3s forwards;
animation: fadeout 5s linear 3s forwards;
}
#-webkit-keyframes fadeout {
0% {
opacity: 1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.25;
}
100% {
opacity: 0;
}
}
#keyframes fadeout {
0% {
opacity: 1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.25;
}
100% {
opacity: 0;
}
}
<div class="xr_ap xr_ac c2" id="xr_xpxr_40">
<span class="xr_annt animated fadeOut c1" id="xr_uid_10"></span> </div>
<div class="xr_txt Normal_text c4">
<span class="xr_annt animated fadeOut c3">Sample Text</span>
</div>