On most browser-os-constillations the standard background of the site is white, so if I create a website I at first set the background-color to something dark. But if I try and set the transition property on "*", the background also fades in, which, in my opinion, looks bad. How can I remove that?
*{
transition: 2s;
}
body{
background-color: #000
}
<html>
<body>
<p>Hi!</p>
</body>
</html>
if your point is to select all and avoid the body from transition
you can use :not(body) :
:not(body){
transition: 2s;
}
body{
background-color: #000
}
I can't seem to be able to replicate the fade transition of the background you're describing.
However, if you need to exclude a specific element and/or property from animating, you can do it like this:
To exclude an element:
*:not(body) {
transition: all 2s;
}
To exclude a property:
* {
transition: all 2s, background-color 0;
}
Or to prevent the transitioning of background-color on the body:
* {
transition: all 2s;
}
body {
transition: all 2s, background-color 0;
}
Related
I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!
div {
margin: 3rem;
height: 10rem;
width: 10rem;
background: pink;
transition: height 0.3s ease;
}
div:hover {
height: 20rem;
background: orange;
}
<div />
You can specify delays for any property you like:
div {
transition: height 0.3s ease, background 0.3s ease 0.3s;
}
(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)
I am working on a web app. When a user visits the landing page, I want to fade-in an image. That image is the background for some text. When the image has successfully loaded, I then want to move the text in from the top. Currently, I have the following:
<html>
<head>
<title></title>
<style type="text/css">
.banner {
background-image: url('/public/img/bg.png');
background-size: cover
}
#keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
.fade-in {
opacity:0;
animation:fadeIn ease-in 1;
animation-fill-mode:forwards;
animation-duration:0.2s;
}
#keyframes translateY { from { y:0px; } to { y:100px; } }
.translate-y {
animation:translateY ease-in 1;
animation-duration:0.1s;
animation-fill-mode:forwards;
}
</style>
</head>
<body>
<div class="banner fade-in">
<h1 class="translate-y">Welcome</h1>
</div>
</body>
</html>
There are several problems with this approach:
The animation starts whether the background-image is loaded or not.
The "Welcome" text starts animating before the background-image is loaded.
I'm not sure how to fix this. The first item is especially frustrating. I can't use jQuery, so I'm stuff with CSS. The second item, I could use an offset. However, once again, if the image isn't cached, nothing runs properly.
Place your image in the background with an <img ...> tag, (not with CSS background-image: ... attribute).
You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">
I have seen this problem before, there is a solution I have used myself from this css-tricks article, but just in case the link does go dead here is the solution: You need to add a class/id to your body to ensure that everything transitions/animations and anything you need CSS runs after the body loads. The below is an example of what you can achieve, keep in mind you can add anything else you need under the #preload id.
CSS
#preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
HTML
<body id="preload">
JS
// trigger right as the document loads
document.getElementById("preload").className = "";
Give it a try and let us know if this worked for you.
You can use animation-delay and add it to the elements.It should solve your problems :
animation-delay: 2s;
Using CSS transitions on most properties runs as expected, except this issue I am having with colours.
I have set up a demonstration pen here.
When transitions are instructed to change the color property, they all queue after each other instead of happening all at once.
This seems limited to webkit as IE and Firefox work as expected.
#change {
color: green;
transition: color 200ms linear;
}
.changed {
color: red;
}
I think it's because color is inherited property, and you use * selector for transition. You should set transition: color only to element you change color, for example (http://codepen.io/sergdenisov/pen/QbjjjP):
#container {
padding: 0;
transition: color 500ms;
}
#container * {
transition: margin 500ms;
}
I've a div like this:
.x{
...
}
And a sort of "submenu" initially hidden:
.x_submenu {
...
display:none;
...
}
The submenu will be visible only when the user is on the x div:
div.x:hover .x_submenu {display:block; }
Now, I'd like to make it visible with a transaction or an effect that makes the visibility more "slow".
Is there a way to achieve that goal, possibly with a cross-browser solution?
Thanks,
A
The best option is with opacity:
HTML:
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
Css:
div
{
opacity:0;
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
opacity:100;
width:300px;
}
see demo: http://jsfiddle.net/wyKyT/
you won't be able to make transition work on 'display' property.
You will have to achieve this using the 'opacity' property.
Related to :
Transitions on the display: property
-webkit-transition with display
Jim Jeffers explained :
To work around this always allow the element to be display block but hide the element by adjusting any of these means:
Set the height to 0.
Set the opacity to 0.
Position the element outside of the frame of another element that has overflow: hidden.
and, for your transition, to make it 'cross-browser' :
.transition {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
No, there is not. CSS transitions work only for scalar values, so they can be applied to properties dealing with dimensions, colors (as these are represented in rgb values as well), opacty, etc. Other values like display, float, font-family etc cannot be transitioned as there are no possible intermediate states to display. You will have to fall back to using JavaScript or try to work with properties like opacity or applying workarounds like height: 0 to height: 100px
you can change display: none; to opacity: 0; (keeping in mind all browser compatibilities), and display: block; to opacity: 1;
the transition should work. And should you wish to make the items invisible to the mouse (unclickable or undetectable) while they are at 0 opacity, you can add
pointer-events: none;
together with the strip where it is at opacity: 0; and
pointer-events: auto;
where it is visible.
I would like to know how do you create the "delay" in Responsive design?
What I mean is, take the site awwwards.com as an example. When you reduce the width of the browser there is a bit of a delay for the site to respond.
I would of imagined the code being this:
html, body {transition: all 0.2s ease-in-out;}
but clearly it isnt (...or is it?!)
Just want to apply this effect on my own site which is Blue Harlequin
Add -webkit-transition: width 0.3s linear; to your .w css class like this
CSS:
.w {
width: 960px;
margin: 0 auto;
-webkit-transition: width 0.3s linear;
}
Because the .w is the container for all your elements so add the the transition to that class will make the layout as how you expect.
It does have transition: width 0.3s linear 0s; but it on the wrapper div.