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;
}
Related
I have made an animation in which the image floats.
But the image seems to be vibrating when reaching the end.
Here is the website where the image is link
This is the CSS if the div wrapping the img
.newImg {
position: relative;
width: 472px;
height: 414px;
animation-name: updown;
animation-duration: 5s;
/* animation-delay: 1.5s; */
animation-iteration-count: infinite;
transition-timing-function: ease-in-out;
}
#keyframes updown {
0% {
top: 0px;
}
25% {
top: 8px;
}
50% {
top: 0px;
}
75% {
top: 8px;
}
100% {
top: 0px;
;
}
}
The vibration you see because of the top property. Try using translateY() instead. It will perform faster, animate smoother, and won't affect the layout.
#keyframes updown {
0% {
transform: translateY(0);
}
25% {
transform: translateY(8px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(8px);
}
100% {
transform: translateY(0);
}
}
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>
Is it possible to circularly animated this image?
I attempted to animate it by creating a relative parent and setting each image (business solutions div, it solutions div, lifecycle solutions div and education solutions div to absolute). I used this code, #keyframes rotate {
0%{
transform: rotate(0deg); }
100%{
transform: rotate(360deg); }
}
and it rotated in different behavior. They rotated on their own place.
I want to animate it in such a way that: the 4 services will circularly move. Except the outer and inner texts. Thank you in advance.
Here's a quick demo of the general pricipal.
.box {
width: 200px;
height: 200px;
margin: 5em auto;
border: 1px solid grey;
position: relative;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.object {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: plum;
top: 25px;
left: 25px;
-webkit-animation: spin 10s infinite reverse linear;
animation: spin 10s infinite reverse linear;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
<div class="box">
<div class="object">Text</div>
</div>
You will need at least two elements. The static one must have have transparent areas so that it can sit over or behind the rotating div.
To rotate the div:
div.your-rotating-element {
animation-name: rotate-div;
/*enter other styles*/
animation:spin 4s linear infinite;
}
#-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
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);
}
}
This question already has answers here:
CSS3 Translate across an Arc
(3 answers)
Closed 7 years ago.
Is it possible with current CSS3 to animate an object (DIV) along an this arc?
I've forked the (very good) #ArunBertil "fulcrum" solution to convert it to CSS3 Animation:
Running Demo
CSS
#keyframes drawArc1 {
0% { transform: rotate(180deg); }
100% { transform: rotate(0deg); }
}
#keyframes drawArc2 {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
body{
padding: 150px;
background: black;
}
.wrapper {
width: 300px;
animation: drawArc1 3s linear infinite;
}
.inner {
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
}
HTML
<div class="wrapper">
<div class="inner"></div>
</div>
Watch it on FireFox... to run it on other browsers, simply put the prefixes (#-webkit-keyframes, etc)
Check this
http://dabblet.com/gist/1615901
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
Well, working on the work of Andrea based on the work of Arun ...
simplified to make use of only 1 div, and 1 animation:
#keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
#-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
demo
Added also text in the div to show that it doesn't rotate