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.
Related
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 :)
I have created an container that if filling up and I want to apply to that some "waves animated effect" and I'm a bit stuck because I am not sure how to do it:
Does anyone cand help me with those waves effecct animations ?
body {
background-color: #015871;
}
.container {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
}
.shape {
width: 200px;
height: 200px;
border-radius: 50%;
border-top-right-radius: 0;
transform: rotate(-45deg);
float: left;
margin-top: 50px;
margin-left: 20px;
border: 5px solid #fff;
overflow: hidden;
position: relative;
}
.frame {
position: absolute;
transform: rotate(225deg);
background-color: #00eaff;
bottom: -80px;
left: -80px;
right: 0;
height: 10px;
width: 200%;
animation: fill-up 1s ease infinite;
}
#keyframes fill-up {
to {
height: 300px;
}
}
<div class="container">
<div class="shape">
<div class="frame" />
</div>
</div>
working example: https://codesandbox.io/s/vigorous-keldysh-uw2po?file=/src/styles.css:81-720
Improved your code with inner element .wave with two rotating blocks. No JavaScript, no svg. Switch overflow hidden off to see how simple it works.
body {
background-color: #015871;
}
.container {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
}
.shape {
width: 200px;
height: 200px;
border-radius: 50%;
border-top-right-radius: 0;
transform: rotate(-45deg);
float: left;
margin-top: 50px;
margin-left: 20px;
border: 5px solid #fff;
overflow: hidden;
position: relative;
}
.frame {
position: absolute;
transform: rotate(45deg);
background-color: rgba(0, 234, 255, 0.5);
bottom: -8px;
left: 15px;
right: 0;
height: 245px;
width: 200px;
}
.wave {
position: absolute;
top: 50%;
left: 0;
width: 200%;
height: 200%;
transform: translate(-25%, 0);
background: #4973ff;
animation: fill-up 10s ease infinite;
}
#keyframes fill-up {
to {
top: -60%;
}
}
.wave:before,
.wave:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgba(1, 88, 113, 1);
animation: animate 3s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgba(1, 88, 113, 0.5);
animation: animate 3s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
<div class="container">
<div class="shape">
<div class="frame">
<div class="wave">
</div>
</div>
</div>
</div>
Working example https://codepen.io/focus-style/pen/oNbxVBX
I have an absolutely positioned div that I want to have slowly increase in size (5s transition) on hover, to become a "border" for a relative-positioned div on top of it:
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>
Styles (vendor prefixes removed for readability):
.rectangle {
position: relative;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content {
height: 800px;
width: 200px;
}
Transitioning the overall .background size results in choppy animation but an even border:
.rectangle:hover .background {
width: calc(100% + 40px);
height: calc(100% + 40px);
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
transition: 5s linear all;
}
Transitioning a border is choppy animation, but (obviously) an even border
.rectangle:hover .content {
border: 20px solid red;
transition: 5s linear all;
}
Transitioning a transform-scale is smooth, but results in a larger top and bottom "border" because it is a rectangle:
.rectangle:hover .background {
transition: 5s transform;
transform: scale(1.1);
}
Any way to either get transform-scale to keep even dimensions, or any other way to create this effect?
You can try using box shadow as a border to achieve smooth transitions.
.rectangle {
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 30%;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 0 0px #000;
transition: 5s linear box-shadow;
}
.content {
height: 300px;
width: 200px;
}
.rectangle:hover .background::before {
box-shadow: 0 0 0 20px #000;
transition: 5s linear box-shadow;
}
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>
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.
I'm currently trying to animate a growing <div> but I don't want the content to look like it is growing along with it. The content should remain invisible while the <div> is animating and once it's fully grown I'd like for the content to become visible (by changing the opacity of the <a> in that <div>).
This is the code for the <div> animation:
#keyframes menu {
0% {
background-color: white;
right: -25px;
top: -25px;
border-radius: 100px;
width: 0px;
height: 0px;
}
25%{
right: -50px;
top: -50px;
border-radius: 100px;
width: 60px;
height: 60px;
}
50% {
right: -50px;
top: -50px;
width: 80px;
height: 80px;
border-radius: 100px;
}
75%{
right:-50px;
top:-50px;
width: 150px;
height: 150px;
border-radius: 100px;
}
80%{
right:-50px;
top:-50px;
width: 300px;
height: 300px;
border-radius: 300px;
}
100%{
right:-150px;
top:-150px;
width: 450px;
height: 450px;
border-radius: 600px;
}
}
It's basically a menu that starts in the corner and grows until the full screen is covered (mobile). I've tried adding a{ opacity: 1 }; but I guess it doesn't work like that.
If you want the anchor text (within the div) to be visible only after the animation on the parent div is fully complete then add another animation to the a, animate the opacity from 0 to 1 after a delay which is equal to the animation-duration of the parent.
div {
background-color: black;
line-height: 450px;
text-align: center;
animation: menu 4s linear forwards;
}
a {
color: white;
text-decoration: none;
animation: display 1s linear 4s backwards;
}
#keyframes menu {
0% {
background-color: white;
right: -25px;
top: -25px;
border-radius: 100px;
width: 0px;
height: 0px;
}
25% {
right: -50px;
top: -50px;
border-radius: 100px;
width: 60px;
height: 60px;
}
50% {
right: -50px;
top: -50px;
width: 80px;
height: 80px;
border-radius: 100px;
}
75% {
right: -50px;
top: -50px;
width: 150px;
height: 150px;
border-radius: 100px;
}
80% {
right: -50px;
top: -50px;
width: 300px;
height: 300px;
border-radius: 300px;
}
100% {
right: -150px;
top: -150px;
width: 450px;
height: 450px;
border-radius: 600px;
}
}
#keyframes display {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div>
<a href='#'>Some Menu Link</a>
</div>
I would use a little jQuery to do that. Using a callback you can call opacity 1 on a after the div is complete grown.
$( ".yourdiv" ).animate({
width: "450"
height: "450"
}, 5000, function() {
//callback will cause the a to change its opacity only when the above function is complete
$('.yourdiv a').css('opacity') = '1';
});