I'm trying to figure out how transforming, animating, and transitioning work, and I've followed atleast 1 or 2 crash courses and I have followed 5 solutions in problems related to this, and still nothing worked.
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 2s ease-in-out;
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: width 1s ease-in-out, transform 2s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180);
width: 30vh;
}
JSFiddle: https://jsfiddle.net/q976oc0h/1/
CodeSandbox: https://codesandbox.io/s/dark-pine-i0ut5?file=/index.html
CodePen: https://codepen.io/ssssss12518/pen/rNMMZoL
It doesn't work on any code editor I know, even IDEs like Atom. (my main text editor)
There's a couple of things going on.
The transform functions als take a unit:
transform: rotateZ(180); -> transform:rotateZ(180deg);
The transition from height:auto; isn't intuitively supported.
There's a couple of work arounds. You could find exmaples on this question
Sidenote: Generally, transitioning on width/height is bad practice for performance. It will trigger a reflow/recalculate of the document structure. which is costly.
You would also notice that the text inside the divs gets squished into multiple lines or moves around a lot.
general approach is to use transform to shrink/grow/fold-out the elements. like you did for rotate.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Arial", sans-serif;
}
.container {
padding: 10px;
margin-left: 20px;
}
.container > *[class*="bg"] {
margin-left: 10px;
}
.bg-gray {
margin: 10px 0px;
background-color: #cbd5e0;
border: 3px solid black;
padding: 20px;
margin-bottom: 20px;
width: 30%;
}
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 1s ease-in-out;
height:100px; /*I've added a base heigth to so the browser can calculate a starting value */
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: transform 1s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180deg); /*i've added a 'deg' as unit*/
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Transition Animation CC</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="bg-gray" id="tr-w">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" id="tr-h">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" style="height: 30vh;" id="tr-r">
<p>
Hover over me
</p>
</div>
</div>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
because you didn't set default height to #tr-h element
#tr-h {
transition: height 2s ease-in-out;
height:100px;
}
Related
Does anybody know how to play transitions from two separate Components
with the same styling at the same time.
Here is a video, which shows my problem.
https://youtu.be/WNu4Mdfn98U
Important CSS Parts
.Container_Active .Description {
max-height: 500px;
margin-top: 5px;
color: var(--ifm-color-on-primary);
transition: max-height 1000ms ease-in; /* Transiation 1 */
}
.Description {
max-height: 0;
margin: 0;
font-size: var(--ifm-font-size-18);
overflow: hidden;
transition: max-height 1000ms ease-out; /* Transiation 2 */
}
Important HMTL Parts
<div
className={clsx(styles.Container, {
[styles.Container_Active]: active,
})}
>
</div>
<SectionRightItem
key={i}
title={section.title}
description={section.description}
onClick={() => {
setIndex(i);
}}
icon={section.icon}
active={index === i}
/>
My goal is that the one element slowly shows the description and the other element slowly hides the expanded description at the same time.
But somehow the transitions are played in a row, although they are triggered at the same time.
Thank you ^^
Actually your animation is starting at the same time, but the problem is that you use the transition of max-height with a value that's too high, so the transition will start from the height of 500px to 0px, but your content height doesn't even reach half of it, so it appears like there's a delay between your transition
To resolve the problem, you can lower the value of .Container_Active to match your actual description height, or change it to height rather than max-height with an average height of your actual description
Here's a simple snippet about the difference between max-height (light blue) and height (red) for the transition which makes your transition looks like it's delayed, both height / max-height is set to 0 when not opened and 10em when opened
$(function() {
setInterval(function() {
$('div').toggleClass('open');
}, 1500);
});
div {
position: absolute;
}
#front {
max-height: 0;
overflow: hidden;
background: lightblue;
transition: max-height 1000ms ease-in-out;
padding-left: 3em;
}
#front.open {
max-height: 10em;
transition: max-height 1000ms ease-in-out;
}
#back {
height: 0;
background: red;
transition: height 1000ms ease-in-out;
opacity: .75;
}
#back.open {
height: 10em;
transition: height 1000ms ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='front' class='open'>
Hello World Welcome<br/>World</br>Welcome
</div>
<div id='back' class='open'>
BACK
</div>
I have a basic setup. When I increase the height, I get a smooth increase. When decreased, I should get a smooth decrease but instead a sharp decrease.
<div className="foo <!-- -->">Hey</div>
You may have noticed className and <!-- -->, I'm using react. <!-- --> gets replaced with the class to decrease the height.
// SCSS
.foo {
height 400px;
// background props
transition: all 250ms ease-out
}
.foo.decreaseClass {
height: 40px;
transition: all 250ms ease-in
}
When the new class is attached, the div becomes
<div className="foo decreaseClass">Hey</div>
How to get both transitions down/up?
It's because you're not properly closing the height declaration in .foo. You're using a comma instead of a semi-colon, rendering both height and transition declarations invalid. Also note the same declaration should contain a colon between the style property name and its value (height: 400px;).
Therefore, your element only has defined height and transition only when having both classes.
See it working:
document.querySelector('.foo').addEventListener('click', function(event) {
event.target.classList.toggle('decreaseClass')
})
.foo {
height: 200px;
transition: all 250ms ease-out;
border: 1px solid
}
.foo.decreaseClass {
height: 40px;
transition-timing-function: ease-in
}
<div class="foo">Hey</div>
Use CSS #keyframe animation and alternate properties. infinite is added just for demo purposes. Instead of height I added transform:scaleY(1) to (10).
Demo
body {
overflow: hidden
}
.test {
width: 200px;
margin: 10px;
background: red;
font-size: 32px;
text-align: center;
color: white
}
.B {
height: 40px;
animation: animB 1s alternate infinite;
transform-origin: top;
}
#keyframes animB {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(10);
}
}
<div class='test B'>TEST</div>
im doing something on HTML,CSS and transition-property, transition-duration, transition-timing-function properties arent work on my project. I used every -webkit- , -moz-, -o- and others not work. I did uninstall the Google Chrome and I installed it again but dont work. My codes:
index.php:
<?php
include "function/baglanti.php";
?>
<html>
<head>
<title>Deneme | Anasayfa</title>
<link rel="stylesheet" href="style/main.css" />
</head>
<body>
<div id="den">sshshsh</div>
</body>
</html>
main.css:
#den
{
width: 100px;
height: 100px;
background-color: red;
}
#den:hover
{
width: 200px;
transition: width 0.5s linear;
}
For the transition to work both ways, move the transition property to the #den rule
#den
{
width: 100px;
height: 100px;
background-color: red;
transition: width 0.5s linear; /* moved it here and it work both ways */
}
#den:hover
{
width: 200px;
}
<div id="den">sshshsh</div>
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)
I have the following issue with CSS :nth-child pseudo selector and I'm pretty sure I have missed something out.
index.html
<html>
<head>...</head>
<body>
<div class='selector'>first</div>
<div class='selector'>second</div>
<div class='selector'>third</div>
<div class='selector'>fourth</div>
<div class='selector'>fifth</div>
</body>
</html>
style_does_not_work.css (does not work)
.selector { background-color: #ffffff; }
.selector:nth-child(1) { background-color: #f00000; }
.selector:nth-child(2) { background-color: #ff0000; }
.selector:nth-child(3) { background-color: #fff000; }
.selector:nth-child(4) { background-color: #ffff00; }
.selector:nth-child(5) { background-color: #fffff0; }
style_that_works.css (for the proof of the selector concept)
.selector { background-color: #ffffff; }
.selector:nth-child(even) { background-color: #f00000; }
.selector:nth-child(odd) { background-color: #ff0000; }
I'm a little bit confused why :nth-child(2) does not work but :nth-child(even) does. Is there a difference or something I've missed out?
My goal is to give fixed positionned elements a dynamic offset from top while the elements are injected and removed by javascript dynamically.
Update / Additional
Unfortunately I've made a typo in the example above. But this unfortunately does not solve the real case - even I see the working JS-Fiddles (I'm really confused because of that...)
Additionally I've post some screens with the current issue:
CSS:
.notification-area {
position: fixed;
z-index: 999;
width: 500px;
height: 100%;
overflow: hidden;
}
.notification-area.top-right {
top: 25px;
right: 25px;
left: auto;
-webkit-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-moz-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-ms-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-o-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
}
/* these lines are completely ignored */
.notification-area:nth-child(2) { margin: 125px 0px 0px 0px; }
.notification-area:nth-child(3) { margin: 250px 0px 0px 0px; }
.notification-area:nth-child(4) { margin: 375px 0px 0px 0px; }
.notification-area:nth-child(5) { margin: 500px 0px 0px 0px; }
/* this line grabs instead - I don't want to use "even", but it shows me, that the selector :nth-child() should be fine... */
.notification-area:nth-child(even) { margin: 125px 0px 0px 0px; }
You didn't close div in second .selector. Works fine:
fiddle
You missed closing tag of div in 2nd div.
Try this one :nth-child(n+1) instead of :nth-child(2)
Try changing the nth-child(n) to nth-of-type(n) since we're not working with their child nodes. I've deleted this answer before because I thought that the real problem was that you forgot to close one of your divs but you seem to haven't solve it yet so I'll post it again.