This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 1 year ago.
I was learning from youtube and I ended up at transition bcs of my problem with one.
Any delay or duration is not workig and I don't know why. I really want to know what is a reason of executing this problem. I'm kinda of new in that stuff. :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::AFTER & :: BEFORE</title>
<link rel="stylesheet" href="style.css">
<script>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
}
p::before {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition: all ease-in-out 250ms;
}
p::after {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition-property: width;
transition-delay: 1s;
transition-duration: 2s;
}
p:hover::before,
p:hover::after {
width: auto;
}
</script>
</head>
<body>
<p>Here is some content</p>
</body>
</html>
First off, you need to include your css in a style tag if you need to inline it. Also, when you use width: auto, it will just have the browser calculate a width and set it for you. You are best off just setting the width to 100% and it will try to take up the whole space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::AFTER & :: BEFORE</title>
<link rel="stylesheet" href="style.css">
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
}
p::before {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition: all ease-in-out 250ms;
}
p::after {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition-property: width;
transition-delay: 1s;
transition-duration: 2s;
}
p:hover::before,
p:hover::after {
width: 100%;
}
</style>
</head>
<body>
<p>Here is some content</p>
</body>
</html>
Related
* {
box-sizing: border-box;
}
.btn-option {
width: 330px;
padding: 12px 24px;
margin: auto;
border-radius: 8px;
background-color: transparent;
color: #4c4c4c;
visibility: visible;
border: 1px solid #d2d2d2;
text-transform: capitalize;
font-weight: 500;
letter-spacing: 1px;
font-family: "Lato", sans-serif;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
/* transition */
transition: filter 0.3s ease 0.3s;
}
.survey-checkbox {
position: relative;
}
.survey-checkbox::before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background: #efefef;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.option-container {
margin: auto;
display: flex;
flex-direction: column;
row-gap: 20px;
flex-wrap: wrap;
}
#media only screen and (max-width: 768px) {
.btn-option {
width: 280px;
}
}
.btn-option:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}
.btn-option:active {
background: #fcece8;
border: 1px solid #e76943;
}
.btn-option:active .survey-checkbox::before {
background-color: #e76943;
}
.btn-option:not(:active) {
transition: all 1000ms step-end;
}
.survey-checkbox::before:active {
background-color: #e76943;
}
.btn-option:active {
animation: all 1s forwards linear;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<div
class="btn btn-option">
<span>Good</span><input type="checkbox" class="survey-checkbox" />
</div>
</body>
</html>
Guys I want to Animate the Checkbox on clicking the parent div right now the problem is as I'm clicking on the parent div it's working fine as expected but the checkbox is working till the active state is there how can I make it transition same like the div.
To make the Div animate on active state I followed an article
So basically I was trying to make a javascript game in HTML (I'm good at HTML but not other languages so I was confused when this problem happened)
so I made sure the syntax was correct, it was. and then did some search on the internet but it didn't help the animation just won't display. I tried many times but it just. won't
so here is the HTML code if you wanted to check it.
#game {
width: 500px;
height: 200px;
border: 1px solid;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s is infinite;
}
#keyframes block {
0% {
left: 480px;
}
100% {
left: 40px;
}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
so yeah. thanks in advance
Although you say you have checked the syntax is correct, there should be an 'invalid property value' showing in your devtools on the css for setting the animation for #brick.
It has an 'is' in it. Maybe you meant 1s or maybe you didn't intend for it to be there?
Here's the snippet without it:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
<style>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
</style>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
Incidentally, you will probably find it more efficient (of processor) to use transform translateX rather than reset left position in an animation.
change different animation properties then it work. like animation-name: block; animation-duration: 5s; animation-iteration-count: infinite;
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left:0;
animation-name: block;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
your code had a bit problem that was the use of "is" in your animation property
I have been struggling an issue I have using CSS overflow.
I have a page that I intend to be responsive. The navigation menu is what is causing my issue.
Specifically the "overflow-x: hidden" declaration...
At first I thought the issue could be related to devtools, (or rather my misuse of it) but I have tested the site on two mobile phones and it's the same there...
The interesting thing is how the overflow is not hidden until there is a click event, I think the solution is related to this fact... maybe haha
https://www.youtube.com/watch?v=_hsCahD-1Ig
I'd really appreciate anyone taking a look at the video and giving me some advice. Thanks.
UPDATE: As pointed out... I should really add the code too...
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Responsive Sliding Nav</title>
</head>
<body>
<nav>
<div class="logo">
<h4>NAV BAR</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
CSS (style.css):
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
background: url(tst.jpg);
//background-size: auto 100vh;
background-size: cover;
background-repeat: no-repeat
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
// background-color: #5D4954;
background-color: rgba(93, 73, 84, 0.79);
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
//transition: all 0.3s ease;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
//background-color: #5D4954;
background-color: rgba(93, 73, 84, 0.7);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
JS (app.js):
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index)=>{
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
});
}
navSlide();
Since you did not provide any information on how you have created everything (HTML/CSS/Javascript), the only thing I can help you with just by looking at the video is that you probably never set the html or body width/height. So add the following lines in your CSS file:
html, body {
width: 100%;
height: 100%
}
But next time, please be sure to provide more details and code.
You can try by adding !important property like this:
#media screen and (max-width:768px){
body {
overflow-x: hidden!important;
}
......
}
if this doesn't work you should try adding overflow-x:hidden to html as well. Try with and without !important.
Hope this would fix your issue.
Try to move display properties from .nav-links to .nav-active class and set .nav-links display:none
Something like this
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
/* background-color: #5D4954; */
background-color: rgba(93, 73, 84, 0.7);
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
display: none;
}
.nav-active {
transform: translateX(0%);
display: flex;
flex-direction: column;
align-items: center;
}
Hope this helps :)
Cheers
I am not sure if this is a simple task to accomplish but I've had no success so far.
Let me explain the problem a little so that you understand what's going on.
The body element contains one div which contains a background that covers the entire window. I want this very big div to contain a smaller one somewhere in the middle. A transparent one. So whenever I would hover over the invisible div the parent would zoom from there.
This is me trying to accomplish a CSS zoom effect in a certain area of a picture. Whenever I leave the entire invisible div I want the huge background to return to its original zoom.
Here's some code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
</script>
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
transition: transform .2s;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
}
Thanks a lot in advance!
-> please update css into your css file
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
overflow: hidden;
transition: transform .2s;
-webkit-transition: transform .2s;
-moz-transition: transform .2s;
-ms-transition: transform .2s;
}
.indexPage:hover .indexInvisible {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
Use a background-image:inherit on the inner div and leverage background-size on hover.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.map {
width: 860px;
height: 480px;
background-image: url(https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg);
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
;
}
.zoomer {
width: 80%;
height: 80%;
background: inherit;
border: 3px solid blue;
background-size: 125% 125%;
transition: background-size .5s ease;
background-position: center center;
}
.zoomer:hover {
background-size: 150% 150%;
}
<div class="map">
<div class="zoomer"></div>
</div>
Let's say for example I have an image of a dog. How do I make when the user hovers over the image, the image disappears and instead has the h1 tag that says "bark"?
Maybe this code snippet can be a solution
<html>
<head>
<style>
#wrap {
width: 128px;
height: 128px;
border: 2px solid black;
display: inline-block;
position: relative;
}
#img {
width: 128px;
position: absolute;
z-index: 2;
top: 0;
transition: all 0.3s ease-in-out 0s;
}
#img:hover {
opacity: 0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Bark!</h1>
<img id="img" src="https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/256x256/plain/dog.png">
</div>
</body>
</html>
Maybe this code snippet can point you in the right direction:
<html>
<head>
<style>
img, h1 {
transition: all 0.3s ease-in-out 0s;
}
h1 {
display: none;
}
img:hover + h1 {
display: block;
}
h1:hover + img {
display: none;
}
img:hover {
display: none;
}
</style>
</head>
<body>
<div>
<img src="http://i.imgur.com/jsdLHHv.png" />
<h1>Bark</h1>
</div>
</body>
You can achieve this through different methods. For my example below on hover on the container it changes the "visibility" property. See sample code below.
.animal-cont{
width: 16%;
height: 120px;
border: 3px #ddd solid;
position: relative;
cursor: pointer;
}
h1 {
left: 50% ;
top: 50%;
transform: translate(-50%,-50%);
margin: auto;
position: absolute;
visibility: hidden;
color: #843f15;
}
img {
max-width: 100%;
}
.animal-cont:hover > img {
visibility: hidden;
}
.animal-cont:hover > h1 {
visibility: visible;
}
<div class="animal-cont">
<h1>Bark!</h1>
<img id="img" src="">
</div>