I'm making a modal popup in CSS that will appear and and translate down (translateY) after clicking on the link. My problem is popup did appear but it already at downside. I know how to make translate on hover but I cant figure out how to translate this without hover. Can anyone give me some advice?
HTML
<a href='#A'>Open</a>
<div id='A' class='B'>
<div class='C'>
Test</div>
</div>
CSS
.B {
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
background:rgba(0,0,0,0.8);
opacity:0;
z-index:99999;
pointer-events:none;
}
.B:target {
opacity:1;
pointer-events:auto;
}
.B > .C {
width:100px;
height:100px;
background:#FFF;
background:-moz-linear-gradient(#FFF, #999);
background:-webkit-linear-gradient(#FFF, #999);
background:-o-linear-gradient(#FFF, #999);
-webkit-border-radius:15px;
-moz-border-radius:15px;
-ms-border-radius:15px;
-o-border-radius:15px;
border-radius:15px;
position:relative;
}
.C {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-transform: translate(0px, 50px);
-moz-transform: translate(0px, 50px);
-o-transform: translate(0px, 50px);
-ms-transform: translate(0px, 50px);
transform: translate(0px, 50px);
}
JSFiddle
http://jsfiddle.net/M5tcL/16/
CSS transitions make changes on a property's value appear smooth to the viewer (tween?).
You don't ever change a css property's value here, so there is nothing to animate.
There has to be two css states with different values. You need javascript or a checkbox to make this work.
You can use javascript to toggle a class on the body element for example, or a checkbox with an associated label.
Then you can use
/* Normal state */
.C{
opacity: 0;
transition: all .3s;
}
/* Open state */
:checked ~ .C,
/* OR */
body.open .C{
opacity: 1;
}
In this snippet example, opacity will get animated while changing between 0 and 1.
Related
i'm trying to have my main element to start from a state with transform and when you hover over it will transform with a transition. however, when you unhover it, the element transforms back to it's original state without doing a transition. if i put transition in the main as well then it would transform when the page loads with a transition. i want it to not change in the beginnning. any help would do.
main {
width:500px;
height:300px;
transform:perspective(1500px) rotateX(50deg);
transition:transform 2s;
}
main:hover {
transition:transform 2s;
transform:perspective(0px) rotateX(0deg);
}
Remove transition: transform 2s; from main:hover, and put it inside main.
.main {
width: 500px;
height: 300px;
background: red;
transition: transform 2s;
transform: perspective(1500px) rotateX(50deg);
}
.main:hover {
transform: rotateX(0deg);
}
<div class="main"></div>
Including it in the main normal state will fix this:
main {
width:500px;
height:300px;
-webkit-transform:perspective(1500px) rotateX(50deg);
transform:perspective(1500px) rotateX(50deg);
-webkit-transition:-webkit-transform 2s;
transition:-webkit-transform 2s;
-o-transition:transform 2s;
transition:transform 2s;
transition:transform 2s, -webkit-transform 2s;
background: red;
}
main:hover {
-webkit-transform:perspective(0px) rotateX(0deg);
transform:perspective(0px) rotateX(0deg);
}
View fiddle.
Without transition on initial hover, set it to none for normal state:
main {
width:500px;
height:300px;
-webkit-transform:perspective(1500px) rotateX(50deg);
transform:perspective(1500px) rotateX(50deg);
background: red;
-webkit-transition:-webkit-transform 2s;
transition:-webkit-transform 2s;
-o-transition:transform 2s;
transition:transform 2s;
transition:transform 2s, -webkit-transform 2s;
}
main:hover {
-webkit-transform:perspective(0px) rotateX(0deg);
transform:perspective(0px) rotateX(0deg);
-webkit-transition: none;
-o-transition: none;
transition: none;
}
View fiddle.
The example you give in the opening post does not exhibit the problem you are referring to of applying the transition animation on page reload.
For example:
.main {
background: #DDD;
width: 100px;
height: 80px;
transition: transform 2s;
transform: perspective(1500px) rotateX(50deg);
}
.main:hover {
transform: rotateX(0deg);
}
<div class="main"></div>
This is essentially identical to your example and shows the desired outcome. So you should double check if there are other transitions that you may misinterpret, or other events that cause the hover style to become active.
In the current state, this question cannot be answered.
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 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>
this is not right way to do i know that and it's not working anymore it's only done for understand my problem.
div
{
transform: rotate(0deg) translate(0);
transition:rotate 0.2s linear, translate 0.3s linear 0.2s;
}
div:hover
{
transform: rotate(60deg) translate(40);
}
As per css3 standards its not possible to achieve the same which you have mentioned. Instead you can make something like this.
<div class="outer">
<div class="inner">
</div>
</div>
.outer
{
height:30px;
width:30px;
transform:translateX(0);
transition:transform 2s linear;
}
.inner{
width: inherit; height: inherit;
transform: rotate(0deg);
transition:transform 2s linear;
background:blue
}
.outer:hover
{
transform: translateX(140px);
}
.outer:hover .inner
{
transform: rotate(160deg);
}
To clarify, I want to create a "hover" transition in css only, where the hover state of one DIV animates another DIV (this I can get to work using "~" selector). And then, animate(w/transition) multiple children inside of the second DIV.
It seems, that I cannot animate the child div if the parent is animated. Here's an example: a button to the left which upon hovering activates the transition/transform animation of the second div (a red half circle): (I want the two half-circles to rotate at different times (delay), and for different periods of time (duration))
http://jsfiddle.net/dXCK6/2/
.mommy {
width:300px;
height:56px;
background-color:hsla(40, 50%, 60%, .6);
position:absolute;
left:240px;
}
.daddy {
visibility:visible;
width:170px;
height:170px;
border-radius:50%;
background-image: linear-gradient(90deg, hsla(10, 90%, 50%, 1) 50%, hsla(100, 90%, 50%, .0) 50%);
position:absolute;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition:0s;
transition:0s;
}
.mommy:hover ~ .daddy {
visibility:visible;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s ease-in .2s;
transition: .6s ease-in .2s;
}
.baby {
width:150px;
height:150px;
border-radius:50%;
background-image: linear-gradient(90deg, hsla(5, 35%, 50%, 1) 50%, hsla(100, 90%, 50%, .0) 50%);
position: relative;
top: 10px;
left: 10px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition:0s;
transition:0s;
}
.mommy:hover ~ .baby {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .1s ease-in .9s;
transition: .1s ease-in .9s;
}
Please note:
1)There must be positioning, visibility, and everything that's in that jsfiddle. 2)in the example, I have "baby" set to a different transition time but you cannot see it happen (this is my problem) 3)
In fact you have a wrong selector (which is .mommy:hover ~ .baby), so the animation for the .baby in fact does not run. Only the animation of the parent .daddy is run, it rotates and makes the inner child .baby also rotate. This effect made you think both animations run at the same time. Also because of this effect, I'm not sure what the exact effect you want. I've tried editing the code mainly to show that both animations can work right on the hovering:
/* This is what the selector should be */
.mommy:hover ~ .daddy > .baby {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: .1s ease-in .9s;
transition: .1s ease-in .9s;
}
Demo.