Reproduction online
Reproduction with vanilla Javascript
I'm creating a CSS animation by using this:
.slides.future.active {
-webkit-animation-name: sectionIn;
animation-name: sectionIn;
}
#keyframes sectionIn {
....
}{
.animated {
transition: all 800ms ease;
-moz-transition: all 800ms ease;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease;
timing-function: ease;
}
.slides.future{
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0 );
}
Having the following HTML:
<div id="demo2" class="slides animated future active">
Demo
</div>
<div class="slides animated future">Demo 2</div>
Now, when I remove the class future from the element, the animation gets fired again.
This only happends in IE. (10, 11, 12, 13) Working well in Firefox, Chrome, Safari...
Reproduction online
Reproduction with vanilla Javascript
Strangely (not very strange for IE) you need to also tell the browser what to do when .slides and .active are there but not .future. If you don't then for that split second it goes back to where it was until it gets the instruction to revert back again. So you need to add:
.slides.active:not(.future){
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0 );
}
Note: Tested in IE 11 only.
Fiddle
A possible solution is to change the CSS selector.
Instead of .animated use .future.animated and apply the animation on that selector.
.future.animated {
transition: all 800ms ease;
-moz-transition: all 800ms ease;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease;
timing-function: ease;
}
That way only the element with both classes gets animated. So removing the class future from the element prevents it from animating again.
https://jsfiddle.net/jsms8p1k/17/
Related
I made a css that can rotate my image when someone hover it
But I would rotate this image every 10 seconds too
.smiley-construct {
width: 64px;
padding: 0;
}
.smiley-construct img {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
.smiley-construct img:hover {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-moz-transform: rotate(540deg);
-o-transform: rotate(540deg);
-ms-transform: rotate(540deg);
}
<div class="smiley-construct">
<img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png">
</div>
Can I change that to rotate my image every 10 seconds
but and keep the hover rotate too ?
Thanks
You can create a keyframe in css, something like this:
#keyframes rotating {
0% {
transform: rotate(0deg);
}
93% {
transform: rotate(0deg);
}
100% {
transform: rotate(540deg);
}
.smiley-construct img {
animation: rotating 10s infinite;
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
We can have two CSS animations - one which rotates the face then waits for the best part of 10s and keeps doing that and the other which kicks in on hover and just spins once.
I am not absolutely sure of the effect you want - is the face to go upside down after each rotate? You may want to play around with animation-fill-mode if not.
Here is a snippet:
.smiley-construct {
width: 64px;
padding: 0;
}
.smiley-construct img {
animation-name: spinwait;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.smiley-construct img:hover {
animation-name: spin;
animation-duration: 0.7s;
animation-iteration-count: 1;
}
#keyframes spinwait {
0% {
transform: rotate(0deg);
}
7% {
transform: rotate(540deg);
}
7.1% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(540deg);
}
}
<div class="smiley-construct">
<img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png">
</div>
You can make a function in javascript and make something like this:
Or make it jquery on when your page loads, but without knowing the structure and the resources available, I can not decide for you.
var elemPicture = document.getElementById("PictureId");
elemPicture.style.transition = "all 0.5s";
elemPicture.style.transform = "rotate(15deg)";
Better yet, use keyframes. No need to add extra JS if you can use CSS.
There's a pretty good explanation of how to do this here.
I have added a keyframe animation to slowly zoom the background image in and it works perfectly, however when I move mouse out the animation jumps back to the original state instead of zooming out.
#startup.hover:before {
opacity:1;
-webkit-animation: animatedBackground 5s ease-in-out 1;
-moz-animation: animatedBackground 5s ease-in-out 1;
animation: animatedBackground 5s ease-in-out 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes animatedBackground {
0% {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
}
Am I missing something here?
first of all, is .hover a class you are adding or were you meant to use :hover? Just pointing this out. Assuming this is a class, you should add the transitions animation on the id.
#startup:before {
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}
..this is why it's breaking when you are hovering out. There's no transition animation without the class!
You dont need such an advanced tool as a keyframes to make this effect.
It is easily achivable with transitions, here is an example.
https://jsfiddle.net/vqL3stjz/
.animable{
width: 100px;
height: 100px;
background-color: #000;
transition: all 500ms;
}
.animable:hover{
transform: scale(1.3, 1.3);
transition: all 500ms;
}
And if you need to make it with keyframes, then i suggest just applying reverse animation to unhovered element.
However, you will need to use some javascript then, to prevent side effect like animation running on the element right after it is loaded etc.
TL;DR Better use tranistions, unless you really need to use keyframes.
I've been trying to use a transition-delay when moving from "state A" to "state B" but not having that delay when moving back to state A. This is a general question though about whether the CSS spec says that the settings for a transition should be those when the transition starts or those from the state which is being transitioned to. Here is an example:
.menu {
transform: translateX(0%);
transition: transform 1s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 5s ease-out;
}
Should the opening animation animation take 1 second or 5 seconds?
My code is slightly more complicated as it uses a delay, but basically it boils down to this.
.menu {
transform: translateX(0%);
transition: transform 0.5s ease-out 0;
}
.menu.is-open {
transform: translateX(100%);
transition: transform 0.5s ease-out 0.5s;
}
When I try this in Chrome or Firefox I get a delay when opening the menu and no delay when closing the menu, but in IE11/Edge it behaves as it would without the delay set. So I'm not sure whether this is a browser bug, or whether I've misunderstood how transitions work, hence my more general question about which transitions are used.
It should be transition: transform and not transition: translate
The transition rule accepts CSS properties not values
Try reversing the order so that the .menu gets the half second delay
.menu{
transform: translateX(0%);
transition: transform 0.5s 0.5s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 0.5s 0s ease-out;
}
As for not working in IE, see vendor prefixes for transition and transform
Seems like you understood correctly how transition works. See my code snippet:
JSFiddle
.hoverable {
height: 50px;
background-color: yellow;
}
.moving {
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: transform 1s linear 0s;
transition: -ms-transform 1s linear 0s;
transition: transform 1s linear 0s;
}
.hoverable:hover + .moving {
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
-webkit-transition: transform 0.5s linear 0.5s;
transition: -ms-transform 0.5s linear 0.5s;
transition: transform 0.5s linear 0.5s;
}
<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>
Maybe transition-timing-function: ease-out seems like delay for you in some cases, so I used transition-timing-function: linear in my example to show the transition with a constant speed.
The red block moves from 0% to 200% for 0.5s with 0.5s delay. And moves from 200% to 0% for 1s without delay. There is no any magic with how transition works.
I have this CSS animation where when a page is chosen, the page scrolls from the bottom to the top.
The issue I am having is that the page briefly displays in it's top position first, then disappears to scroll from the bottom to top. How can I keep the page from showing before it's animation?
Note: I would like to keep the brief animation delay 500ms
mainPanelContent.classList.add('slide-up-now');
.slide-up-now {
-webkit-animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
-moz-animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}
#-webkit-keyframes slide-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(0); }
}
Solution:
The correct solution to this issue is to set animation-fill-mode as backwards (or use the shorthand like below):
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;
Reasoning:
When delay is added to any animation, its execution is put on hold till that time has elapsed and during this time, the element holds whatever position was assigned to it initially. For it to start at the translated position, you either have to manually add the setting to the element (or) tell the UA to do it for you.
When we set the animation-fill-mode as backwards, the UA automatically sets the property value defined for the first frame of the animation's first iteration as the properties during the delay period and thus it will start at the translated position for your case.
Here's what the W3C Spec says about animation-fill-mode: backwards
During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation. These are either the values of the from keyframe (when animation-direction is normal or alternate) or those of the to keyframe (when animation-direction is reverse or alternate-reverse).
Alternate Solution:
You can of-course solve this by adding a transform: translateY(100%) to the element originally also but that makes less sense when there is a specific property to achieve it.
(I assume that the element did not have transform: translateY(100%) initially in your code.)
Why using opacity may not always be acceptable solution?
Solution by using opacity (as you have done in your own answer) is not wrong but you would notice that the opacity also gets animated from 0 to 1 over the course of the animation which means that the content slowly fades into view as opposed to just a slide up action. While, this can also be fixed by adding extra keyframes in between, those are just work-arounds for something that could have been achieved by using a single property.
Sample for all solutions:
In the below snippet, I have added samples for the version with the problem and all possible fixes.
.slide-up-now {
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}
.slide-up-now-fixed { /* preferred method */
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;
}
.slide-up-now-fixed-initial-prop {
transform: translateY(100%);
animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
.slide-up-now-opacity {
opacity: 0;
animation: slide-up-opacity .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
#keyframes slide-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slide-up-opacity {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Just for demo */
div{
display: inline-block;
height: 100px;
margin: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='slide-up-now'>Slide Up Now</div>
<div class='slide-up-now-fixed'>Fixed by Fill Mode</div>
<div class='slide-up-now-fixed-initial-prop'>Fixed by Initial Setting</div>
<div class='slide-up-now-opacity'>Fixed by Opacity</div>
I got it with this:
.slide-up-now {
opacity: 0;
-webkit-animation: slide-up 1s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
#-webkit-keyframes slide-up {
0% { -webkit-transform: translateY(100%); opacity: 1 }
100% { -webkit-transform: translateY(0); opacity: 1 }
}
Note: I did opacity: 1 twice on purpose. I don't want any opacity effect at all and the first opacity 1 was not enough.
I am using LESS and BOOTSTRAP for a website, and this is my first time actually using the less language, so this entire "mixins" thing is really confusing to me. I have read all of the documentation on the dotless website, and on the bootstrap site, but the actual "way" to use some of the mixins is escaping me.
In specific, I am having a hard time understanding how you discern what passes as a valid parameter. I am attempting to do with with transitions/transforms, using the following CSS...
-webkit-transform-origin: top;
-webkit-transition: all 0.2s linear;
-webkit-transform: scale(1, 0);
-webkit-animation-fill-mode: forwards;
-moz-transform-origin: top;
-moz-transition: all 0.2s linear;
-moz-transform: scale(1, 0);
-moz-animation-fill-mode: forwards;
-ms-transform-origin: top;
-ms-transition: all 0.2s linear;
-ms-transform: scale(1, 0);
-ms-animation-fill-mode: forwards;
-o-transform-origin: top;
-o-transition: all 0.2s linear;
-o-transform: scale(1, 0);
-o-animation-fill-mode: forwards;
transform-origin: top;
transition: all 0.2s linear;
transform: scale(1, 0);
animation-fill-mode: forwards;
From what I grasp, I am supposed to be able to do this in a much simpler format using the mixins built into bootstraps. The mixins are declared as follows;
// Transitions
.transition(#transition) {
-webkit-transition: #transition;
transition: #transition;
}
.transition-property(#transition-property) {
-webkit-transition-property: #transition-property;
transition-property: #transition-property;
}
.transition-delay(#transition-delay) {
-webkit-transition-delay: #transition-delay;
transition-delay: #transition-delay;
}
.transition-duration(#transition-duration) {
-webkit-transition-duration: #transition-duration;
transition-duration: #transition-duration;
}
.transition-transform(#transition) {
-webkit-transition: -webkit-transform #transition;
-moz-transition: -moz-transform #transition;
-o-transition: -o-transform #transition;
transition: transform #transition;
}
// Transformations
.rotate(#degrees) {
-webkit-transform: rotate(#degrees);
-ms-transform: rotate(#degrees); // IE9 only
transform: rotate(#degrees);
}
.scale(#ratio; #ratio-y...) {
-webkit-transform: scale(#ratio, #ratio-y);
-ms-transform: scale(#ratio, #ratio-y); // IE9 only
transform: scale(#ratio, #ratio-y);
}
.translate(#x; #y) {
-webkit-transform: translate(#x, #y);
-ms-transform: translate(#x, #y); // IE9 only
transform: translate(#x, #y);
}
.skew(#x; #y) {
-webkit-transform: skew(#x, #y);
-ms-transform: skewX(#x) skewY(#y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(#x, #y);
}
.translate3d(#x; #y; #z) {
-webkit-transform: translate3d(#x, #y, #z);
transform: translate3d(#x, #y, #z);
}
.rotateX(#degrees) {
-webkit-transform: rotateX(#degrees);
-ms-transform: rotateX(#degrees); // IE9 only
transform: rotateX(#degrees);
}
.rotateY(#degrees) {
-webkit-transform: rotateY(#degrees);
-ms-transform: rotateY(#degrees); // IE9 only
transform: rotateY(#degrees);
}
.perspective(#perspective) {
-webkit-perspective: #perspective;
-moz-perspective: #perspective;
perspective: #perspective;
}
.perspective-origin(#perspective) {
-webkit-perspective-origin: #perspective;
-moz-perspective-origin: #perspective;
perspective-origin: #perspective;
}
.transform-origin(#origin) {
-webkit-transform-origin: #origin;
-moz-transform-origin: #origin;
-ms-transform-origin: #origin; // IE9 only
transform-origin: #origin;
}
But I am not entirely clear on how this works. I cannot seem to figure out what "parameters" to pass through #transition and the like to make this code work. Can anyone help me out here? I am just kind of lost.
Whatever text you pass to an #variable when you use the mixin in a selector block will be copied to the places where the #variables appear in the mixins, and the contents of the mixins will be placed in your block. You can consider mixins somewhat like placeholder functions.
That means that if you declare a selector like:
div p:first-child {
.transition(width 2s ease-in-out, color 2s;);
color: red;
}
Using the .transition mixin you listed above, the Less processor will generate a CSS like:
div p:first-child {
-webkit-transition: width 2s ease-in-out, color 2s;
transition: width 2s ease-in-out, color 2s;
color: #FF0000;
}
The semicolon is important at the end of the argument otherwise Less may get confused and think you are sending two parameters, since comma-separated parameters are also valid. It won't be a problem in this case (since there is no .transition mixin that accepts two arguments), but it's good practice to always separate arguments with semicolons.
So to use the mixins, simply place them where you would add CSS declarations, end them with a semicolon, and pass the parameters as arguments.
Less does no duplication detection, so if you call the mixin twice, it just copies the replaced contents twice. If you already have a transition: property, for example, the mixin will add another one and its effect may be lost if yours comes after.
The best place to learn about Less, variables and mixins in at http://lesscss.org which has the full documentation in a few pages with plenty of examples. It's also great to have an editor which converts your Less files into CSS in real time so you understand how it works.
For the example you posted, you could create a mixin like the following:
.your-mixin(#origin, #transition, #transform, #anim-fill-mode) {
-webkit-transform-origin: #origin;
-webkit-transition: #transition;
-webkit-transform: #transform;
-webkit-animation-fill-mode: #anim-fill-mode;
-moz-transform-origin: #origin;
-moz-transition: #transition;
-moz-transform: #transform;
-moz-animation-fill-mode: #anim-fill-mode;
-ms-transform-origin: #origin;
-ms-transition: #transition;
-ms-transform: #transform;
-ms-animation-fill-mode: #anim-fill-mode;
-o-transform-origin: #origin;
-o-transition: #transition;
-o-transform: #transform;
-o-animation-fill-mode: #anim-fill-mode;
transform-origin: #origin;
transition: #transition;
transform: #transform;
animation-fill-mode: #anim-fill-mode;
}
To use it, you add it inside a selector block where you want the properties copied to:
.your-selector, .other-selector {
.your-mixin(top; all 0.2s linear; scale(1, 0); forwards;);
}