CSS transition values in "from" and "to" states - css

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.

Related

How do I rotate an image at hover and every 10 seconds?

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.

how do i make opacity transition after transform

I'm trying to make something like fullpage.js. I have an active element and previous element. When I'm scrolling I have transform property on the both blocks, one like
.active {
transform: translateY(0);
opacity: 1;
transition: all 1s ease;
}
And another is
.previous {
transform: translateY(100vh);
opacity: 0;
transition: all 1s ease;
}
Without transition they appear in a moment without any delay. But when I add transition they starting to blink because of the opacity. How can I make the block first to transform and then to lose it's opacity
You can simply define multiple transitions:
div {
width: 200px;
height: 200px;
background: orange;
opacity: 0.5;
transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
}
body:hover div {
transform: rotate(45deg);
opacity: 1;
}
<div></div>

How to rotate div around itself using css3?

I am trying to implement rotation for all the divs inside my website. I need this functionality on mouse hover.
You can use animation
div {
width: 100px;
height: 100px;
background-color: #ddd;
margin-bottom: 10px;
transition: all 1s ease;
}
div:hover {
animation: rotate 1s forwards alternate linear
}
#keyframes rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
<div></div>
if you would like to make it with transition so you need to add to the main class the following:
transition:all 0.3s;
note: the 0.3s represents the time, you can change it to any number like 0.7s
then you will add the following to the :hover event
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
note: deg is representing how many degrees you want them to rotate, so you can add any number rather than 90deg like 360deg
I have created a jsfiddle for you check that out so, you get the ideas how rotation works.
div{
height:100px;
width:100px;
background-color:#000;
margin:50px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
div:hover{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-0-transform:rotate(45deg);
}
<div>
</div>

Why transition isn't working with opacity, unless timing is in seconds

Jsfiddle: http://jsfiddle.net/techsin/ww4y5rj7/
Unless i define time in seconds like 2s and not cubic-bezier or even ease-in or ease-out. There is no effect on opacity. I'm using chrome.
However, if i just change opacity to width then it works as expected.
why and how can i fix this..
.main {
background-color: #4a0;
padding: 20px;
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
}

I Want to Fade in and Rotate at the Same Time

I'm using ccs3 to fade in an image on hover. I'd like that same image that fades in on hover to rotate. I seem to be missing something.
Here is a jsfiddle. http://jsfiddle.net/5ftZ7/
<div id="cf">
<img class="bottom" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin-over.png" /> <img class="top" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin.png" />
</div>
#cf {
position:relative;
margin:30px auto;
width:200px;
height:200px;
}
#cf img {
margin-top:30px;
position:absolute;
left:0;
top:0;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in;
}
#cf img.top:hover {
opacity:0;
position:absolute;
left:0;
top:0;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
There are a variety of issues that culminate in this not working the way you want:
Understanding of transition rules
CSS properties cannot accumulate. There is nothing special about the transition rule:
transition: opacity .2s ease-in-out;
transition: transform .2s ease-in-out;
The second declaration overrides the first. This would be no different than:
color: red;
color: blue;
being blue. You can use multiple comma-separated transition definitions, or use the special all property:
transition-property: opacity, transform;
transition-duration: .2s;
transition-timing-function: ease-in-out;
/* or */
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
/* or, but this may affect properties you do not want */
transition: all .2s ease-in-out
:hover with stacked elements.
.top is on top of .bottom, so .bottom cannot be hovered even when .top is transparent. This prevents rules that you would want to apply to .bottom from being applied. The simplest solution to this is just to check for :hover on #cf instead, as in #cf:hover img.top as the selector.
transform missing from .bottom
.bottom also needs the transform rules when it is hovered so it can rotate in sync with .top.
Here is a working example using only -webkit and increasing the transition durations for effect.
http://jsfiddle.net/ExplosionPIlls/5ftZ7/1/
I guess what you are trying to achieve is this:
Fiddle: http://jsfiddle.net/marionebl/5ftZ7/2/.
Includes -webkit- only for brevity. What this does:
Uses the former .bottom as first layer in stack
Replaces .bottom with a html element mimicking the image in your fiddle. Could be a png with transparency, too.
Listen for :hover state on #cf instead of .bottom or .top
Fade the former .bottom in, rotate the former .top
you can't use several transitions on an element,
if you want to apply transition to several properties you can use "all"
transition: all 1s;
or comma separated transition:
transition: opacity 1s, transform 0.8s;
#keyframes rotation {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(359deg);
opacity: 1;
}
}

Resources