I'm trying to get a bouncing mouse animation to work on my website.
The exact same code works on another website, whereas on mine it just doesn't do anything.
Here's the css:
.mouse {
display: block;
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 32px;
color: #fff;
z-index:9999;
position: absolute;
color: #e8e8e8;;
bottom: 240px;
}
.mouse i {
-webkit-animation: todown 1.2s infinite linear;
transition: all 0.3s ease-in-out;
}
The HTML:
<a href="#x11" class="mouse">
<i class="fa fa-angle-double-down icon-option"></i>
</a>
On this website you can see the scrolldown icon I'm trying to create: http://noxxar.com/demo/uralco/
If you want to use CSS animations you need to define #keyframes.
Luckily the CSS on the theme you linked isn't minified or anything, so you can just copy/paste the parts you want to recreate.
Since Firefox 15 the -moz vendor prefix isn't needed but Chrome and other Webkit Browser still need -webkit-animation: http://caniuse.com/#feat=css-animation
CSS:
#to-slider-scrollto i {
-webkit-animation: todown 1.2s infinite linear;
animation: todown 1.2s infinite linear;
}
#to-slider-scrollto i:hover {
-webkit-animation: none;
animation: none;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
10% {
-webkit-transform: translateY(-15px);
opacity: 0;
}
50% {
-webkit-transform: translateY(0);
opacity: 1;
}
90% {
-webkit-transform: translateY(15px);
opacity: 0;
}
100% {
-webkit-transform: translateY(15px);
opacity: 0;
}
}
#keyframes todown {
0% {
transform: translateY(-15px);
opacity: 0;
}
10% {
transform: translateY(-15px);
opacity: 0;
}
50% {
transform: translateY(0);
opacity: 1;
}
90% {
transform: translateY(15px);
opacity: 0;
}
100% {
transform: translateY(15px);
opacity: 0;
}
}
Working codepen demo with only the needed CSS
Check out cross browser compatibility
.mouse i {
-webkit-animation: todown 1.2s linear infinite;
animation: todown 1.2s linear infinite;
}
#-webkit-keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
#keyframes todown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
Related
So today is a special date ... 🙂
Both Ambigram and Palindrome!
I tried to make CSS that would demonstrate this, but I have some issues:
There is a small jump between the end of the rotate and the original place of the text.
In the first half of the animatoin (from 0% to 50%) the Palindrome should be demonstrated. Do not know how to do such animation. There are all kinds of options, for example video of 02/02/2020 https://thumbs.gfycat.com/GroundedReliableInchworm-mobile.mp4
#import url('https://fonts.googleapis.com/css2?family=Dhurjati&family=Qahiri&display=swap');
.rotate{
color: rgb(22 02 2022);
width: 100%;
font-size: 100px;
text-align: center;
font-family: Dhurjati, Qahiri;
position: absolute;
animation: rotate 10s linear infinite 0s;
-ms-animation: rotate 10s linear infinite 0s;
-webkit-animation: rotate 10s linear infinite 0s;
}
.move1 {
margin-left: 10px;
}
.move2 {
margin-left: 30px;
}
#-moz-keyframes rotate{
50% { opacity: 1; -moz-transform: rotate(0deg); }
100% { opacity: 1; -moz-transform: rotate(180deg); }
}
#-webkit-keyframes rotate{
50% { opacity: 1; -webkit-transform: rotate(0deg); }
100% { opacity: 1; -webkit-transform: rotate(180deg); }
}
#-ms-keyframes rotate{
50% { opacity: 1; -ms-transform: rotate(0px); }
75% { opacity: 1; -ms-transform: rotate(180px); }
}
<div class="rotate">22<span class="move1">02<span><span class="move2">2022</span></div>
I can not play several animations one after the other with a "fluid" effect:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></div>
Am I doing something wrong? I want to keep the keyframes separate.
You may need to consider forwards on the second one to keep its last state because actually when both animations ends your element get back to the inital value of the scale transform which is scale(1) (to be more precise it's transform:none)
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
UPDATE
The waiting time is due to the animation-timing-function used which is ease for both and this mean that you will have an ease-out (slow at the end) and ease-in (slow at the start) which create this behavior of pausing between both animations. If you change the first one to ease-in and the last one to ease-out you won't have this issue.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s ease-in, pulse 0.5s ease-out 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
Your pulse animation ends at scale 1.1, and then your circle snaps back to scale 1. Maybe the pulse keyframes should be as follows:
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
In the snippet below you see no snapping, but maybe this isn't the effect you were looking for?
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
You need a short pulse at the end when your circle is scaled to 1, this is your fluid effect I presume.
Rather than having to different animations, why don't we tweak the keyframes in the zoomIn animation a little bit.
HTML:
<div id="circle"></div>
CSS:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 0.4s ease-out;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Hope this helps.
the only animation is 'Transform', it is best to use a 'timing function' customization, I recommend utilities 'Cubic-bezier' go to this website http://cubic-bezier.com and practice. read before something about bezier curve.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s cubic-bezier(.4,.17,.49,1.54);
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
UPDATE
or this other 'timing-function'
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1.5s cubic-bezier(.56,1,.92,.7);
height: 100px;
width: 100px;
animation-fill-mode: forwards; /* */
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></div>
I've been trying to make an icon spin on page load using css3 animations. The icon spins in Chrome and IE 9+ but it is not working on firefox version 44. I would appreciate your help.Here is my code:
<div class="pageloading-mask"><div>
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite ease-in-out;
-moz-animation: spin 2s infinite ease-in-out;
animation: spin 2s infinite ease-in-out;
color: #038A3B;
top: 200px !important;
transform: translateY(-50%) !important;
}
#keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Just remove this line transform: translateY(-50%) !important; and it will work like here:
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite 0s ease-in-out;
-moz-animation: spin 2s infinite 0s ease-in-out;
animation: spin 2s infinite 0s ease-in-out;
color: #038A3B;
top: 200px !important;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-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);
}
}
<div class="pageloading-mask">
<div></div>
</div>
see here :jsfiddle
inside the -moz-keyframes you wrote -webkit-transform instead you need to use -moz-transform
and don't use !important on the transform: translateY(-50%)
code :
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
also. be sure you write html correctly :
<div class="pageloading-mask">
<div></div>
</div>
tested in mozzila firefox . let me know if it works
In the linked fiddle, an element has two animations.
https://jsfiddle.net/ccqpLa6L/1/
Below is a capture of the CSS:
#-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px); } 100% { transform: translateX(0); } }
#-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
right: 0;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
-webkit-animation-delay: 0s, 1s;
}
The first animation executes without an issue, but the second animation jumps to the end of its animation without any interstitial frames.
Why?
While I'm not exactly sure why the animation wasn't running properly, I was able to achieve the desired effect using spaced out percentages in one keyframe:
https://jsfiddle.net/ccqpLa6L/5/
#-webkit-keyframes slideInLeft {
0% {
transform: translateX(-200px);
}
25% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
}
}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 4s forwards;
}
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo