So, simple question:
I have an element, which has a animation in its normal state - a transform-animation (perspective, rotateX and rotateZ - but just rotateZ changes) which runs constantly. On :hover I want to change that animation (remove the rotateX and perspective transform, but keep the rotateZ animation) - that's no problem, but I want the animation transition into the new animation and I have no clue how to accomplish that.
JSFiddle
from:
#-webkit-keyframes rotatespace {
0% {
transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
}
100% {
transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
}
}
to:
#-webkit-keyframes rotateflat {
0% {
transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
}
100% {
transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
}
}
Instead of applying all the transform styles to one element you could use the :before pseudo element for the animated block and the element itself for the "3D" effect (the rotateX).
Example:
.block {
position: absolute;
top:100px;
left:100px;
width: 100px;
height:100px;
transform-origin: center center 0px;
overflow:visible;
transform:perspective(555px) rotateX(55deg) scale(1.25);
transition:transform .5s;
}
.block:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: blue;
animation-name: rotatespace;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
.block:hover {
transform:perspective(555px) rotateX(0deg) scale(1.25);
}
#keyframes rotatespace {
0% {
transform:rotateZ(0deg);
}
100% {
transform:rotateZ(360deg);
}
}
<div class="block"></div>
Related
I am trying to make an Oscillatory animation using css as shown below:
Here's how I have created my animation:
#keyframes rotateFeather {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-180deg);
}
50% {
transform: rotate(-90deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
Here is my class: (Using sccs)
.logo {
height: 5rem;
transition: all 0.3s ease;
&box {
position: absolute;
top: 4rem;
left: 4rem;
}
&:hover {
animation-name: rotateFeather;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
Here I am facing this problem: When it reaches 180deg at 100% it abruptly resets to 0 which I want to make smooth.
How is it possible to do the same?
To ensure smooth transition, We need to make sure that transformation at 0 and 100% must match with the original state:
#keyframes rotateFeather {
0% {
transform: rotate(0deg); //-30
transform-origin: bottom;
}
20% {
transform: rotate(-30deg); //-60
transform-origin: bottom;
}
40% {
transform: rotate(0deg); //-30
transform-origin: bottom;
}
60% {
transform: rotate(30deg); // 0
transform-origin: bottom;
}
80% {
transform: rotate(60deg); //30
transform-origin: bottom;
}
100% {
transform: rotate(0deg); //30
transform-origin: bottom;
}
}
This helped me to solve my issue. I am not sure, if I need to add transform-origin in every stage, if someone can elaborate better on that, that would be helpful.
Here's a simplified version of your latest animation code (with a Codepen to see it in action):
#keyframes rotateFeather {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-30deg);
}
80% {
transform: rotate(60deg);
}
100% {
transform: rotate(0deg);
}
}
.logo {
transform-origin: bottom;
&:hover {
animation: rotateFeather 1s linear infinite;
}
}
Some points about the above tweaks:
You don't need transform-origin at every keyframe. You can set it globally.
You can roll all of your animation properties into a single shorthand rule.
You can skip keyframes that are mathematically interpolating where the animation would be going anyway (notice I omitted 40% and 60% above and it looks the same).
You don't need any transition rules on elements that you are animating with keyframes. Unless you're using it for something else, but you want to be careful to avoid attempting to animate the same property on the same element with both animation and transition simultaneously, as it will break the animation in question.
Using this example, is there a way to stop this CSS animation to a fixed point on the screen? So for instance, it's moving across and I decide to have it stop like 20px from the top right of the screen. Is this possible with just CSS?
.bird {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
}
.bird--one {
animation-duration: 1s;
animation-delay: -0.5s;
}
.bird-container {
position: absolute;
top: 20%;
left: -10%;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.bird-container--one {
animation-duration: 15s;
animation-delay: 0;
}
#keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}
#keyframes fly-right-one {
0% {
transform: scale(0.3) translateX(-10vw);
}
10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}
<div style="width:100%;">
<div class="bird-container bird-container--one">
<div class="bird bird--one"></div>
</div>
</div>
https://jsfiddle.net/14ndk5xg/
By changing the VW to a lower number, you can get it to stop a certain distance from the right side of the screen. If you always want the bird to stop when it's travelled approximately 90% of the screen width then you can change the VW to 90.
With the way it's currently setup, it's not easy to make it stop at a certain amount of pixels.
By setting your code like below at 50% and removing the higher percentages, you can get the bird to fly 90% to the right and fly up to the upper right corner.
50% {
transform: translateY(-20vh) translateX(90vw) scale(0.6);
}
I have two transform operations (rotate and translate) and I want to make transition for translate only (rotate have to be instant).
Some suggestions? I prefer pure css.
Use keyframes to reach your desired effect, in addition to animation-fill-mode to keep the computed styles when the animation is finished.
.object {
width: 50px;
height: 50px;
background-color: #F00;
animation-fill-mode: forwards;
}
.object:hover {
animation: move 1s;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
transform: translateY(0px) rotate(0deg);
}
1% {
transform: rotate(45deg);
}
100% {
transform: translateY(25px) rotate(45deg);
}
}
<div class="object"></div>
I'd like to spin an image and I came across this video https://www.youtube.com/watch?v=nD8xqlh6Esk which gave a very simple way to spin a div on a click. I thought this would be a great method to spin an image on a page load with minimal css so tried using a :after as opposed to a :click (with 720 deg) but that didn't work. Has anyone got this approach to work on a page load rather than on a click? I've seen other methods but they need quite a bit more css.
Detail provided
[Apparently my youtube link is to a football match although for me it's to a LevelUp Tuts CSS Experiments #1 - Card Flipping Effect video.]
Basically, he flips a card through a simple transform on a hover as follows:
<div class="card"></div>
.card {
background: blue;
width: 200px;
height: 200px;
}
.card:hover {
transform: rotateY (90deg);
}
So you can spin the div with a single line, a transform, on a hover. There's no need for keyframes.
Try this:
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s infinite;
-webkit-animation: spin 2s infinite;
}
#keyframes spin{
to{
transform: rotate(360deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotate(360deg);
}
<div id="d"></div>
EDIT: is this more like what you wanted?
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s forwards;
-webkit-animation: spin 2s forwards;
}
#keyframes spin{
to{
transform: rotateY(90deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotateY(90deg);
}
}
<div id="d"><img src="http://img4.wikia.nocookie.net/__cb20120208185721/logopedia/images/5/54/Barclays_Premier_League_logo_(shield).gif" width="100px" height="100px"></div>
You need animation as well, not just transition:
http://jsfiddle.net/rudiedirkx/AB277/95/
The magic:
.card {
animation: spinn 5s linear infinite;
/* you don't need transition at all */
}
#keyframes spinn {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(720deg); }
}
For some reason, Chrome still needs prefixes.
More info on css-tricks.
this animates the object as soon as the css and the html load:
(http://jsfiddle.net/oemtt7cr/)
#-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(720deg);
}
}
#keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(720deg);
}
}
.container {
-webkit-perspective: 2000px;
}
.card {
margin: 20px;
background: #990;
width: 200px;
height: 200px;
animation: spin 5s ease;
-webkit-animation: spin 5s ease;
}
<div class="container">
<div class="card">flipy</div>
</div>
Use .card:hover instead of .card:after if you like the animation start when user move in with cursor.
http://jsfiddle.net/AB277/90/
.card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.card:hover {
transform: rotateY(720deg);
}
Or if you like the animation at page load, use the following script.
http://jsfiddle.net/AB277/93/
<div id="card"
</div>
var elm = document.getElementById('card');
elm.classList.add('cardMove');
#card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.cardMove {
transform: rotateY(720deg);
}
I've been searching the answer for awhile but all I can see is translating an object in circular path. Is there a way to translate an element on an ellipse path given the semiminor and semimajor axis? Thanks alot!
the jfiddle of belows answer
css3
Have a look at this page, it explains mostly all you should know about translations with CSS3. Just as reminder: it is also possible to set keyframes you could use to definie your edge points of a spline you want to animate.
keyframes are explained here.
in your case it is a animation of two nested elements.
#1 for the picture or element you want to animate, where you define a X tranlate with ease
#2 and one as outer box for that #1 you animate the Y translate with.
if you arrange them clever in the same timescale but different ease in or out you can make your ellipse happen.
<style>
.viewport {
position:relative;
width:640px;
height:480px;
border:1px dashed #000;
}
.moveX {
position:absolute;
background:#f00;
height:2px;
width:480px;
top:240px;
left:0px;
-webkit-animation: mX 5s ease-in-out 0s infinite;
animation: mX 5s ease-in-out 0s infinite;
}
.moveY {
position:absolute;
width:480px;
height:100px; top:-50px;
border:1px solid #333;
-webkit-animation: mO 5s linear 0s infinite;
animation: mO 5s linear 0s infinite;
}
.elipsoid {
position:absolute;
background:url('http://placehold.it/100/00f/fff/&text=>°))><');
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border-radius:50%;
}
#keyframes mO {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes mO {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes mX {
0% { transform: translateX(0px); }
50% { transform: translateX(160px); }
100% { transform: translateX(0px); }
}
#-webkit-keyframes mX {
0% { -webkit-transform: translateX(0px) }
50% { -webkit-transform: translateX(160px); }
100% { -webkit-transform: translateX(0px) }
}
</style>
<div class="viewport">
<span class="moveX">
<div class="moveY"><span class="elipsoid"></span></div>
</span>
</div>