I am trying to merge a few different CSS transforms on an H3 element. The initial transform is to rotate the text -45deg, while the second set is sliding and fading the element in place.
h3 {
-webkit-transform: rotate(-45deg); // rotate text
-webkit-transition: -webkit-transform 0.6s, opacity 0.6s; // use when element is in view
}
// use when element is in view
.about-trans {
h3 {
opacity: 0;
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
transform: translateY(-60px);
}
}
If you wish to have multiple transofrmations applied just concatenate them like in the CSS below:
h3 {
-webkit-transform: rotate(-45deg); // rotate text
-webkit-transition: -webkit-transform 0.6s, opacity 0.6s; // use when element is in view
}
// use when element is in view
.about-trans {
h3 {
opacity: 0;
-webkit-transform: translateY(-60px) rotate(-45deg);
-moz-transform: translateY(-60px) rotate(-45deg);
transform: translateY(-60px) rotate(-45deg);
}
}
You can also write your transform as Transform matrix. The shortest version of concatenated Transform would be, if you multiply these matrices.
That way, you would have only one transform with one matrix in each definition.
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.
I have a picture that I want to scale to 150% and also move 30px down, with a transition. Only the scale seems to work, any help?
img {
transition: transform 250ms;
}
img:hover {
transform: scale(1.5);
transform: translateY(30px);
}
You just need to combine your transform properties
transform: scale(1.5) translateY(30px);
Should do the trick!
I created this SVG and put in some inline CSS to create a hover effect but it doesn't work. The dashed circle doesn't move and rotate, it only changes opacity. In addition, there's no transition on mouse out like normal css transition. How can I fix this ?
.wrap:hover .dash {
opacity: 0.2;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: translateX(10px);
-webkit-transform: translateX(10px);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transition: 0.3s linear;
}
The link to my code fiddle: http://jsfiddle.net/7s4vszu3/1/
There are a couple of issues here:
First, your transition and transform-origin should be set without the hover selector. This is the reason you weren't seeing the proper transition on mouse out.
Second, you need to include both your transformations in the same rule, so that one doesn't overwrite the other. In your code, your translate is overwriting your rotate.
Here's what it should look like:
.wrap .dash {
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transition: transform 1s linear, opacity 1s linear;
}
.wrap:hover .dash {
opacity: 0.2;
transform: rotate(90deg) translateX(10px);
-webkit-transform: rotate(90deg) translateX(10px);
}
Example here: http://jsfiddle.net/unc3re9b/
So I have this cute little spinner made to signify when something is loading. The perspective changes and the background color are supposed to change at the same time. I am having trouble getting the Transform and Transition timings to line up so that you don't see the color change, it needs to be already changed when the square flips so that it is a smooth transition.
Link to JS Fiddle
HTML
<div class="spinner"></div>
CSS
.spinner {
width: 20px;
height: 20px;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
Two things to consider:
Transitions interpolate smoothly (well, according to the easing function) between keyframes.
If you do not specify an attribute at a keyframe, it will interpolate without interruption over that keyframe.
With those in mind, you can change the keyframes to apply your color change in the middle of your perspective change. In addition, you'll set two keyframes for the color change, very close to each other, to ensure the interpolation happens over a small time slice.
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
24.9% {background-color: #00b16a;}
25.0% {background-color: #f22613;}
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
74.9% { background-color: #f22613; }
75% { background-color: #aaabae; }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
Now, you'll notice that since you have the animation on infinite repeat, that you still get a color transition when the animation loops from 100% to 0%. You'll have to either specify animation-direction: alternate; or adjust your keyframes so that 100% ends at a reasonable tweening point between 100% and 0%.
DEMO using alternate
I would like to start the animation (the first time) from the current position.
the openAnimation goes from the point A to point B and the closeAnimation goes from the point B to the point A.
So, at page loading, the animation is suppose to be in the point B.
but when for the first time I change the class, the div starts from the point A.
#-webkit-keyframes openAnimation
0%
-webkit-transform: translateX(300px)
100%
-webkit-transform: translateX(0px)
#-webkit-keyframes closeAnimation
0%
-webkit-transform: translateX(0px)
100%
-webkit-transform: translateX(300px)
in the .open class
-webkit-transform-origin: 100% 50%
-webkit-animation: openAnimation 1s both ease-in
in the .close class
-webkit-transform-origin: 100% 50%
-webkit-animation: closeAnimation 1s both ease-in
what can I do for don't see the animation the first time?
You probably want transition, not animation. For example, see http://jsfiddle.net/g9dn1a09/
Basically you want following CSS:
.box {
transition: transform 1s;
}
.close {
transform: translateX(300px);
}
.open {
transform: translateX(0px);
}
Note that you want transition defined with a selector that is always applied. If you change property transition using .close or .open class selectors in the middle of the transition (animation) it will look bad.
I put this up on jsfiddle. Chrome/Safari only until you add more vendor prefixes or opt to go with a prefixfree.js or other option.
.open {
-webkit-transform-origin: 100% 50%;
-webkit-animation: openAnimation 1s both ease-in;
}
.close {
-webkit-transform-origin: 100% 50%;
-webkit-animation: closeAnimation 1s both ease-in;
}
#-webkit-keyframes openAnimation {
0% {
-webkit-transform: translateX(0px);
}
100% {
-webkit-transform: translateX(300px);
}
}
#-webkit-keyframes closeAnimation {
0% {
-webkit-transorm: translateX(300px);
}
100% {
-webkit-transform: translateX(0px);
}
}
http://jsfiddle.net/LtJLc/