Basically, the circle moves from left to right spinning like a tire. I tried applying transform rotate 360 but it doesn't work.
html:
<div class="circle"></div>
css:
.circle{
height: 100px;
width: 100px;
background-color: green;
border-radius: 10px;
-webkit-animation:movespin 4s ease-in-out;
animation:movespin 4s ease-in-out;
}
#-webkit-keyframes movespin {
0% {
transform: translateX(0px);
transform:rotate(360deg);
}
100% {
transform: translateX(900px);
transform:rotate(360deg);
}
}
Put them together.
.circle {
height: 100px;
width: 100px;
background-color: green;
border-radius: 10px;
-webkit-animation: movespin 4s ease-in-out;
animation: movespin 4s ease-in-out;
}
#-webkit-keyframes movespin {
0% {
transform: translateX(0px) rotate(0deg);
}
100% {
transform: translateX(900px) rotate(360deg);
}
}
<div class="circle"></div>
Related
I want the square to start playing the animation for 5s then, stop playing the animation for 3s and then continue. Is this possible only using CSS3?
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 20s;
animation-play-state: running;
animation-iteration-count:infinite;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class="box"></div>
Since animation-duration is 20s, then in the #kayframes, 25% = 5s => 5% = 1s => 15% = 3s (between 25% - 40%)
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation: rotate 20s infinite;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
40% {
transform: rotate(90deg);
}
100%{
transform: rotate(360deg);
}
}
<div class="box"></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 have div which I'm continuously rotating using transform rotate (which is working). I then want to be able to scale the div when I hover over the rotating div. I can't get this to work, it does scale when I remove the rotation but I want it to rotate and then scale on hover.
Here is a demo pen i have created: (I'm using sass)
http://codepen.io/HJBdev/pen/BWVMjZ
<div class="spin">
</div>
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
transform: scale(1.3);
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
Wrap it in a container div to Re-scale on hover, then make the .spin div 100%
Like so:
HTML:
.cont {
height: 50px;
width: 50px;
}
.cont:hover {
height: 75px;
width: 75px;
transition: .5s;
}
.spin {
height: 100%;
width: 100%;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
transform: scale(1.3);
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<div class="cont">
<div class="spin">
</div>
</div>
You can create a new animation for the hover that includes the scale.
Like this:
#-webkit-keyframes rotationScale {
from {
-webkit-transform: rotate(0deg) scale(1.3);
}
to {
-webkit-transform: rotate(359deg) scale(1.3);
}
}
Then just use it instead on hover:
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
&:hover {
-webkit-animation: rotationScale 7s infinite linear;
}
}
Without adding any more HTML elements or a wrapper for them, you can use this CSS. And it maybe worth noting that the transition effect makes it more visually appealing to the user because it changes over a chosen duration rather than trying to change in an instant.
.spin {
height: 50px;
width: 50px;
background-color: red;
-webkit-animation: rotation 7s infinite linear;
transition:height 1.5s, width 1.5s;
&:hover {
height:8em;
width:8em;
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
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 am trying to upload the three blocks one by one and I want to make animation control the transform with the help of CSS3. Now what's happening is, it's working fine in google chrome (exactly the way I want) but it's not working fine in firefox. In firefox the three blocks are coming visible first and than the css3 animation starts working, which I don't want. I want the animation from the starting as its coming in google chrome.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.one {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: one 1s ease 1s;
-webkit-animation: one 1s ease 1s;
}
#keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.two {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 2s ease 2s;
-webkit-animation: two 2s ease 2s;
}
#keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.three {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 3s ease 3s;
-webkit-animation: two 3s ease 3s;
}
#keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<section class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</section>
There are several things you should change.
The first is that you should use a common class for all three since they're styled similarly and all having the same effect. I used a class called fadein (and also renamed the animation to this, though they don't need to match).
The second is that you can reuse the same animation for each, just use different animation-delays so that they're spaced out differently.
The third is that you need to have the initial state of all of them be scale(0) so that they don't show in FF. You can then use animation-direction:forwards to make sure they show after the animation as well.
Lastly, if you're going to use -webkit-keyframes, you should use -webkit-transform inside of that as well so that you get more browser support.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.fadein {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
transform:scale(0);
-webkit-transform:scale(0);
animation: fadein 1s ease 1s forwards;
-webkit-animation: fadein 1s ease 1s forwards;
}
#keyframes fadein {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes fadein {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
.two {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.three {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
<section class="wrapper">
<div class="fadein one"></div>
<div class="fadein two"></div>
<div class="fadein three"></div>
</section>