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>
Related
I have a div element, which I have initially kept at Zero '0' opacity.
On certain event I add a class with transition 0.3s and opacity '1'.
But I want transition to to end on out immediately (set 0 opacity without transition when class is removed).
div{
opacity: 0;
transition: opacity 0.3s ease-in;
}
div:hover{
opacity: 1;
}
Tried only with ease-in, and also cubic-bezier(), but somehow I can't do it.
Just move your transition to 'hover' state.
div{
opacity: .5;
}
div:hover{
opacity: 1;
transition: opacity 0.3s ease-in;
}
<div>hello world!</div>
try
div {
height:150px; width:150px; background:red;
opacity: 0;
}
div:hover {
opacity: 1;
transition: opacity 0.3s ease-in;
}
Put cursor below
<div></div>
I have the following class:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
}
I modified the class like this:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
What I tried to do was to apply a transition so that the div is not initially shown when the page is opened but it reaches opacity: 1; after 1s has passed.
I did some research and all I could find on SO and Google was related to hovering. I tried applying "opacity: 0;" to my class but then the transition wouldn't take place, the div would just stay hidden.
Is there any way to accomplish an opacity transition without a hover state using CSS?
You can accomplish this with CSS3 animation:
.dot{
width:40px;
height:40px;
position:absolute;
background:url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size:100% 100%;
z-index:999;
pointer-events:none;
animation:fadeIn 1s ease-in;
}
#keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
<div class="dot"></div>
You can achieve this using css animations.
The animation is set using the #keyframes rule. To illustrate in the example, I removed the margin top; this is not a necessary change in your code.
.dot {
width: 40px;
height: 40px;
position: absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index: 999;
// margin-top:-60%;
pointer-events: none;
animation: fadein 1s ease-in;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="dot"></div>
Yes, use JavaScript to trigger the transition. That is the answer to your question. A transition only happens when there is something to transition to. Just sepcifying a transition on an element does not trigger the transition. Change does. When the element first loads there is nothing to transition to.
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 an element that is red in resting state, and green when the user hovers their cursor over it. I have it set to ease the transition for 0.4s.
Instead of having the colour transition straight from red to green, I'd like it to pass through yellow at the midway point. So when the user mouses over it, it goes from red to yellow to green in one smooth transition. Is this possible?
This is my current code.
.element {
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.element:hover {
background-color: green;
}
You can use the CSS #keyframes animation syntax.
#keyframes animate-color {
0% { color: red; }
50% { color: yellow; }
100% { color: green; }
}
element:hover {
animation: animate-color 0.4s forwards;
}
Change the 0.4s value to control how fast the animation runs.
Here's an example for Chrome using -webkit-animation and #-webkit-keyframes:
https://jsfiddle.net/ahm2u8z2/1/
Make sure you cover all browser possibilities as the syntax is different for Chrome, Firefox, Internet Explorer and Opera.
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Here's more information for configuring your animations in CSS3, you can control things such as animation-delay, animation-direction, and many more.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Alteratively, if you're not up to using #keyframes (although I don't see why not), you can use pseudo elements to act as the middle color. All you need to do is control the delay of the transitions using transition-delay:
.element {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
position: relative;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
background: green;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.element:hover:before {
opacity: 1;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:hover {
background-color: yellow;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="element"></div>
you could use keyframes for this:
.element {
background-color: red;
height: 300px;
width: 300px;
}
.element:hover {
-webkit-animation: changeColor 0.4s forwards;
animation: changeColor 0.4s forwards;
}
#-webkit-keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
#keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
<div class="element"></div>
This works by adding the keyframe sequence when the element is hovered, and not during the actual element's creation (so the keyframes only work during the hovered stage).
The forwards declaration is used so that the animation will 'pause' on the '100%' keyframe, rather than looping back and 'finishing where it started'. I.e. the first keyframe.
Please note: Other prefixes will need to be included see here for more info.
If a create some simple rules with a transition:
.foo {
opacity: 1;
position: absolute;
top: 0;
left: 0;
transition: opacity .3s ease;
}
.foo.is-hidden {
opacity: 0;
top: -9999;
left: -9999;
}
i am dynamically adding and removing the is-hidden class with js.
<div class="foo"> ----> <div class="foo is-hidden">
when i do this, I would like the opacity transition to happen before the absolute position flips it off the screen.
can this be done with just transition? or do i somehow leverage a keyframe animation? I have not done such a thing before?
You can use transition-delay in conjunction with transition:
.foo {
transition: opacity 1s ease, top 1s, left 1s;
transition-delay: 0s, 1s, 1s;
}
In my Fiddle, I set opacity to 0.5 so you can see the effect:
http://jsfiddle.net/5knxvkc0/