I've already done a question about transition, but this time I have to do something a lot harder, and I have got one more time a problem with transition, honestly I have no idea about why it won't work, anyway.
I made some king a "bar", anyway something like an interface, basically is button with a plus. When you hover the pointer on the button, it will go up and show other element, with the transition.
When I hover out the transition work only for the button with the plus (trigger1) but not for the other hyperlink. Why?
Here the code:
html
<html>
<head>
<title>Web Interface Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/interface.css" />
</head>
<body>
<div class="trigger">
<div class="div">
<center>
<span class="text">+</span>
</center>
</div>
<a class="element" href="#"></a>
<a class="element2" href="#"></a>
<a class="element3" href="#"></a>
</div>
</body>
</html>
And CSS:
.div {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: black;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 5;
border-radius: 50%;
visibility: visible;
}
.trigger:hover .div {
transform: translate(0px, -200px) rotate(45deg);
}
.trigger {
width: 50px;
height: 50px;
background: red;
position: absolute;
bottom: 5%;
right: 5%;
position: fixed;
z-index: 4;
border-radius: 50%
}
.element {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: indigo;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element {
transform: translate(0px, -50px);
visibility: visible;
}
.element2 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: yellow;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element2 {
transform: translate(0px, -100px);
visibility: visible;
}
.element3 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: blue;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element3 {
transform: translate(0px, -150px);
visibility: visible;
}
.text {
color: white;
font-size: 40px;
top:
}
Thank's a lot for the help!
This is because you set visibility: hidden on the elements when your .trigger element is not being hovered. It looks like they're not transitioning, but in reality, they're just disappearing.
Related
I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>
I'm trying to get the toggle to move it 100% to the right. As I'm trying to make it responsive, I can't set it to move an xx amount of pixels.
Can you please help?
input:checked + .slider:before {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
https://jsfiddle.net/Lc1tdhgb/1/
Thanks
setTimeout(function() {
document.getElementById('togBtn').checked = true;
}, 1000)
#toggle {
width: 100%;
height: 100%;
position: relative;
}
.switch {
position: absolute;
display: inline-block;
width: 100%;
/*min-height: 32px;*/
height: auto;
top: 0;
}
.switch input {
display: none;
}
.slider {
cursor: pointer;
background-color: #ca2222;
-webkit-transition: .5s;
transition: .5s;
border-radius: 32px;
padding: 12px 0;
}
.slider:before {
position: absolute;
content: "";
height: 1.1em;
width: 1.1em;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .5s;
transition: .5s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #3eab37;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
left: calc(100% - 20px);
/*-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);*/
}
/*------ ADDED CSS ---------*/
.slider:after {
content: 'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 0.7em;
font-family: Roboto, sans-serif;
}
input:checked+.slider:after {
content: 'ON';
}
/*--------- END --------*/
<div id="toggle">
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
</div>
Well, just make sure that the container of the elements follow a position: relative;, so the wrapper have the restrains for the absolute elements inside of it. Then, right is actually how far from right you want the element to be, in this case, you could've used either right: 0%; or left: 100%; although you've encountered the error in the fact that you'd be ignoring margins from the parent's style. That's why I added left: calc(100% - 20px); (20px was on trial and error, until I got it aligned with the outter border of the switch!), then now it works as wanted. Glad to help :)
When I hover over the image, the transition works fine except for the fact that the front image (that of a rotating lock) only translates 20px in Z direction when the mouse is removed from that image. I want the rotating lock image to be 20px in front always.
Also, why does the rotating lock image becomes slightly smaller just after I hover the image?
body {
margin:0;
width: 100%;
height: 100%;
}
.maincircle {
width: 200px;
height: 200px;
position: relative;
margin-left: 200px;
margin-top: 10px;
border-radius: 50%;
border: 1px solid black;
perspective: 600px;
transform-style: preserve-3d;
}
.door {
background-color: gray;
border-radius: 100%;
height: 200px;
margin: 0;
position: relative;
width: 200px;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: 0 50%;
transition: transform 2s 0.5s;
}
.door:before {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 200px;
transform: translateZ(-5px);
}
.door:after {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 100px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}
.maincircle:hover .door {
transform: rotateY(-110deg);
}
.maincircle:hover .locker {
transform: rotate(90deg);
}
.locker {
background-image: url("https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png");
position: absolute;
top: 25px;
left: 25px;
background-size: 100% 100%;
border-radius: 100%;
width: 150px;
height: 150px;
transform: translateZ(20px);
transition: transform 0.5s;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="maincircle">
<div class="door">
<div class="locker"></div>
</div>
</div>
</body>
</html>
Question 1: (I want the rotating lock image to be 20px in front always)
It is because transform settings are not additive in nature. When you specify the transform during the :hover as give below,
.maincircle:hover .locker {
transform: rotate(90deg);
}
it overwrites the transform: translateZ(20px) that is specified within the default state (which is the setting under .locker selector) and so the translation in Z-axis is lost whenever the element is being hovered. It gets applied back only when the :hover is off (that is, the element returns to default state as specified in .locker selector).
In order to always have the translation in Z-axis, translateZ(20px) should be added to the transform stack within :hover selector also like below:
.maincircle:hover .locker {
transform: rotate(90deg) translateZ(20px);
}
body {
margin:0;
width: 100%;
height: 100%;
}
.maincircle {
width: 200px;
height: 200px;
position: relative;
margin-left: 200px;
margin-top: 10px;
border-radius: 50%;
border: 1px solid black;
perspective: 600px;
transform-style: preserve-3d;
}
.door {
background-color: gray;
border-radius: 100%;
height: 200px;
margin: 0;
position: relative;
width: 200px;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: 0 50%;
transition: transform 2s 0.5s;
}
.door:before {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 200px;
transform: translateZ(-5px);
}
.door:after {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 100px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}
.maincircle:hover .door {
transform: rotateY(-110deg);
}
.maincircle:hover .locker {
transform: rotate(90deg) translateZ(20px);
}
.locker {
background-image: url("https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png");
position: absolute;
top: 25px;
left: 25px;
background-size: 100% 100%;
border-radius: 100%;
width: 150px;
height: 150px;
transform: translateZ(20px);
transition: transform 0.5s;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="maincircle">
<div class="door">
<div class="locker"></div>
</div>
</div>
</body>
</html>
Question 2: (Why does the rotating lock image becomes slightly smaller just after I hover the image?)
I am putting this at the last (even below the code) because I know by now you'd have guessed why it became smaller. It becomes smaller because the element is losing the translateZ(20px) and so it is going farther away from your eye. Any object that goes farther away from the eye will look smaller.
I've tried creating a ripple effect on hover over with a button, the only problem I have is that the text shakes/rattles/shivers when I hover over it, I want it to stay still for a smooth transition. Any ideas on how to stop this?
a {
display: block;
position: relative;
width: 300px;
height: 50px;
background: rgba(0, 0, 255, .2);
text-decoration: none;
text-align: center;
overflow: hidden;
margin: 10% auto;
}
p,
span:first-of-type,
span:last-of-type {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
transition: all .3s;
}
span:first-of-type {
transition-delay: .1s;
z-index: 1;
}
span:last-of-type {
transition-delay: .2s;
z-index: 2;
}
span.cta {
color: #33C;
text-transform: uppercase;
font-family: Arial;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: block;
transition: color .3s;
z-index: 3;
}
a:hover p,
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 110%;
height: 660%;
border-radius: 50%;
background: rgba(0, 0, 255, .2);
}
a:hover span:first-of-type,
a:hover span:last-of-type {
width: 100%;
height: 100%;
}
a:hover p span {
color: #FFF;
}
<a href="#">
<p>
<span></span>
<span class="cta">Shop the Trend</span>
<span></span>
</p>
</a>
N.B. It's fine in IE11, it happens in every other browser.
Here you go...Modified HTML[added button text inside div and applied new class "textCta" to it]
<span class="cta"><div class="textCta">Shop the Trend</div></span>
CSS
.textCta {
color:#33C;
text-transform:uppercase;
font-family:Arial;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
display: block;
transition: color .3s;
z-index: 3;
}
Demo
By deleting the p tags and placing the actual text within a div, I managed to stop the shivering and still keep the background effect the same.
Thanks to Nofi for their help.
<a href="#">
<span></span>
<div class="cta">Shop the Trend</div>
<span></span>
</a>
I've read through numerous similar issues regarding this topic, but haven't been able to solve my problem using any of those advices, so giving it a shot to see what I might be doing wrong / how I can solve this :)
I'm trying to get #item-2 to stack in front of #item-1 . This works fine in Chrome etc..but fails in Safari. Any advice would be greatly appritiated.
I have the following html elements:
html,
body {
min-height: 100%;
backround: #FFF;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#scene-bg,
#scene {
position: absolute;
top: 0;
left: 0;
}
#grid {
-webkit-perspective: 865px;
-moz-perspective: 865px;
perspective: 865px;
width: 987px;
height: 720px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border: 1px solid;
}
.inner {
width: 100%;
height: inherit;
position: relative;
top: 17px;
left: 6px;
border: 1px solid;
-webkit-transform: rotateX(-0.3302deg) rotateY(20.5164deg) rotateZ(-0.8716deg);
-moz-transform: rotateX(-0.3302deg) rotateY(20.5164deg) rotateZ(-0.8716deg);
transform: rotateX(-0.3302deg) rotateY(20.5164deg) rotateZ(-0.8716deg);
}
#item-1 {
position: relative;
width: 100%;
height: inherit;
-webkit-transition: background .25s ease-out;
-moz-transition: background .25s ease-out;
transition: background .25s ease-out;
background: red;
}
#item-2 {
position: absolute;
z-index: 99999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
}
<div id="grid">
<div class="inner">
<div id="item-1">
</div>
<!-- /#item-1 -->
</div>
<!-- /.inner -->
<div id="item-2">
</div>
<!-- /#item-2 -->
</div>
<!--/#grid -->