I'm trying to rotate and scale something at the same time with keyframes, but I can't to get it correct without stopping after each step.
I tried it with font-size, but a smarter human being told me to change it to scale, but he won't help me.
body {
position: relative;
}
.plus {
position: absolute;
font-style: normal;
font-size: 30px;
font-family: monospace;
font-weight: bold;
transform-origin: 50% 50%;
animation: transform infinite 3s;
transition: transform 3s ease;
}
#keyframes transform {
0% {
transform: scale(1) rotate(0deg);
}
25% {
transform: scale(0.7) rotate(20deg);
}
50% {
transform: scale(0.4);
}
75% {
transform: scale(0.7) rotate(-20deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
<body>
<div class="plus">
+
</div>
</body>
It's not stopping, it's easing (slowing down at the end).
You don't need transition: transform 3s ease; and you don't want the "ease" for this animation.
You have to set it to linear: animation-timing-function: linear;
And yes, don't animate font-size :D
Related
I am trying to make an animation, where few elements would appear bigger than they are and shrink back to normal.
Here's what I've got:
One of the elements
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
And keyframe
#keyframes ani {
0% {
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
HTML
<div id="wrapper">
<img id="element" src="img.svg">
<img id="element2" src="img2.svg">
</div>
The problem is that whenever the animation starts, elements appear as they never been rotated and rotates only after animation ends. How could I force them to rotate before the animation?
you should combine the rotation code with transform in animation as well. basically rotate and scale both are the values of transform property, so if you only use scale in the animation, it will override rotate value and will only show the scale.
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(82deg);
-webkit-transform: scale(1.5) rotate(82deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
<div id="wrapper">
<img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg">
</div>
You need to move your rotate into the keyframes:
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(0deg);
-webkit-transform: scale(1.5) rotate(0deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
I'm using the keyframes to create an infinite scale up and scale down of a div on mouseover.
As you can see from the link below the parent box increase its sizes and then the child div start to scale up and down.
I would like that on mouse out, before the parent div will scale down, the child div return to its regular sizes in a smooth way.
Now, as you can see, it return to the original sizes suddenly, without any smoothness.
My keyframes:
#keyframes imageZoom {
0% { transform: scale(1); }
50% { transform: scale(1.24); }
100% { transform: scale(1);}
}
#-moz-keyframes imageZoom {
0% { -moz-transform: scale(1);}
50% { -moz-transform: scale(1.24); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes imageZoom {
0% { -webkit-transform: scale(1); }
50% {-webkit-transform: scale(1.24); }
100% { -webkit-transform: scale(1); }
}
#-ms-keyframes imageZoom {
0% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.24); }
100% { -ms-transform: scale(1); }
}
The child div styles:
#myFeaturedItems:hover article {
animation: imageZoom linear 50s;
animation-iteration-count: infinite;
-webkit-animation: imageZoom linear 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#myFeaturedItems article {
background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=01b98cd0603404826ec5df6d9ef46dfc');
background-position: center center;
background-size: cover;
display: block;
height: 100%;
width: 100%;
}
My demo link: http://emanuelezenoni.com/dev/test/
Thanks a lot!
You don't need an animation to achieve what you want. A transition when you hover over the article is suitable. See my very basic example of the transition here below.
What it does:
transition: transform 1s ease-in-out;
This will put a transition on the property transform for 1s with easing ease-in-out. When you hover over .box, the transform: scale(1.25); will run, because we said that a transition was applied on it. The overflow: hidden; makes sure that the content will not be bigger than the box it's in.
You can tweak with the settings to your needs.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.box {
margin-left: 50%;
width: 50%;
min-height: 100%;
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
.box:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
<div class="container">
<article class="box">
</article>
</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 tried and wrote this code but it have a problem, first issue is text inside div will be fuzzy (fluffy)! and second scale animation not play softly, all i want is play animation softly, scale once then rotate infinite on hover.
#-webkit-keyframes socialspin {
from {
-webkit-transform: scale(2) rotate(0deg);
-moz-transform: scale(2)rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotateY(90deg);
-moz-transform: scale(2) rotateY(90deg);
-ms-transform: scale(2) rotateY(90deg);
-o-transform: scale(2) rotateY(90deg);
transform: scale(2) rotateY(90deg);
}
}
Here is JSFiddle Demo
The best way to have a smooth result is not to have a zoom in (scale=2) but a zoom out (scale=0.5), but of course in the opposite state.
And I don't believe that what you want can be achieved with a single animation. I have used 2 elements, and one handles the rotation and the other the scale
#container {
width: 400px;
height: 400px;
}
#container:hover {
-webkit-animation: socialspin 5s linear 0s infinite alternate;
}
#-webkit-keyframes socialspin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotateY(90deg); }
}
#keyframes socialspin {
from { transform: rotate(0deg); }
to { transform: rotateY(90deg); }
}
#base {
width: 400px;
height: 400px;
background: yellow;
transform: scale(0.5);
transition: transform 5s;
transform-origin: top left;
font-size: 200%;
}
#container:hover #base {
transform: scale(1);
}
<div id="container">
<div id="base">
<br>
<br>
<br>
HELLLLOOOO!!!
</div>
</div>
We cannot, as of yet, completely make the font clear. This is because you are using an animation. If there was no spinning, the text would not be fuzzy. However, we can try using several font smoothing properties to try and combat this. None of them are very good but they do improve legibility slightly.
Regardless, here is the fix for the second part:
I found a hack. This will remove the blur during the rotation but not during the scaling up.
.square {
width:100px;
height: 100px;
background-color:black;
margin: 50px;
}
p {
-webkit-font-smoothing: antialiased;
color:white;
text-align: center;
padding-top: 35px;
}
.square:hover {
-webkit-animation: scale 1s linear 0s 1, spin 1s linear 1s infinite alternate;
}
.square:hover p{
-webkit-animation: scaletext 1s linear 0s 1;
}
#-webkit-keyframes scale {
from {transform: scale(1); }
to{transform: scale(2);}
}
#-webkit-keyframes scaletext {
from {transform: scale(1); }
to{transform: scale(1);}
}
#-webkit-keyframes spin {
from {transform: rotateY(0deg) scale(2) ;}
to {transform: rotateY(90deg) scale(2);}
}
<div class="square">
<p>Some text</p>
</div>
(I removed the prefixes to condense the answer)
here is the example and the point is first to describe all features in the main div as defaults because animation uses main elements rules to calculate time etc.
and second point here you used 90 degrees to turn but a complete turning back can be done by 180 degrees which is the angle of a line
here is the code
--update--
here is the exxample you can see scale animates the problem was in your animation scaling started from 2 and ended by 2 so there was no animation for that
--update--
here we go if you run transition first and by the time while transition is running make animation wait by delay time of animation it works fine you can see here
div {
width: 200px;
height: 200px;
background: yellow;
-webkit-transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
margin-left:200px;
margin-top:50px;
transition:-webkit-transform .5s linear;
transition:transform .5s linear;
}
div:hover {
-webkit-transform:scale(2) rotate(0);
transform:scale(2) rotate(0);
-webkit-animation: socialspin 5s linear .5s infinite alternate;
-moz-animation: socialspin 5s linear .5s infinite alternate;
}
#-webkit-keyframes socialspin {
from {
-webkit-transform: scale(2) rotate(0deg);
transform:scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotateY(180deg);
transform: scale(2) rotateY(180deg);
}
}
I'm trying to chain CSS3 animations together, but they behave very weird sometimes. For example, in this pen, why won't the last animation start? I got it working before, but it doesn't anymore, and I used the same setup. The code I'm pasting here is a little bit simplified, but the animations are exactly the same:
HTML:
<div class="box"></div>
CSS:
body {
padding: 60px;
}
.box {
width: 100px;
height: 100px;
background-color: black;
animation-name: fadeIn, fall, elastic;
animation-timing-function: ease, ease-in, ease-out;
animation-duration: 1s, 0.5s, 0.5s;
animation-delay: 0s, 0s, 0.5s;
animation-fill-mode: forwards, forwards, forwards;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fall {
0% { transform: translateY(-100px); }
100% { transform: translateY(0px); }
}
#keyframes elastic {
0% { transform: translateY(0px); }
20% { transform: translateY(60px); }
40% { transform: translateY(-20px); }
60% { transform: translateY(10px); }
80% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
Maybe I'm wrong... but it seems that this does not "chain" them since they play simultaneously. If that's the case, then the last one probably isn't working because you're already keyframeing translateY in the second animation.