/* Content */
#content {
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
margin-top:0;
float:left;
display:block !important;
width:100%;
margin-left:0 !important;
padding-top:70px;
padding-left:205px;
transition: padding 0.25s ease;
-moz-transition: padding 0.25s ease;
-webkit-transition: padding 0.25s ease;
}
#media print {
#content {
margin: 0 !important;
padding: 0 !important;
}
}
If I remove the transition the stylesheet works as expected, otherwise when printing I have about 70px gap at the top.
It appears that the padding property is not applied in the #print style because of the transition. If I remove the css transition, the print styles get applied. Why is this happening so?
Bizarre! In absence of any insight, how about setting the transition properties in a separate rule wrapped in a #media screen query?
I solved it by doing this for print styles:
transition: none;
-moz-transition: none;
-webkit-transition: none;
Related
So i'm doing a transition effect on an <a> that has no default background image so when I try to hover over it the transition effect doesn't work. I doubt that without having a default background image it'll not work. So how can I achieve my goal or any alternative on doing that without using javascript? Here is my code:
<nav>
<li>Products</li>
</na>
Here is my css:
.nav>li>a { font-size:17px; color:#929799; padding:45px 25px 35px 25px;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
.nav>li>a:hover, .nav>li>a:focus{
background:url(http://cdn.myld.com.au/2/1198/web_total-gardens_9a0e4cf244.png) no-repeat top center; color:#38c867; }
background-image is a non-animatable property. You can not apply transitions.
I'm assuming you want to fade in the image on hover (?). A way to fake it is to apply your background image to a pseudo element and transition the opacity:
body {
padding-top: 50px;
}
nav>ul>li>a {
font-size: 17px;
color: #929799;
padding: 45px 25px 35px 25px;
position: relative;
}
nav>ul>li>a>span {
position: relative;
}
nav>ul>li>a:before {
content: "";
background: url(http://placehold.it/200x100) no-repeat top center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
nav>ul>li>a:hover:before,
nav>ul>li>a:focus:before {
opacity: 1;
}
<nav>
<ul>
<li><span>Products</span></li>
</ul>
</nav>
As #GabyakaG.Petrioli mentioned in the comments, your selectors are wrong and you have invalid HTML. Both are fixed in the above example
css transition opacity allow image to change values over a specified duration, animating the property changes
http://css3.bradshawenterprises.com/cfimg/
or try
transition: all 1s ease-in-out;
Well, I have set up an animation when someone hovers over a button, and when they do so, the background color, border radius and the font color change. When I hover over it, there is a smooth animation, however when I stop hovering, there is a very sharp animation.
Code:
.button {
text-align:center;
background:#ccc;
display:inline-block;
position:relative;
text-transform:uppercase;
margin:25px;
border:solid #B26B24;
background:none;
color:#fff;
border-top-left-radius:17px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius:17px;
-moz-border-radius-topleft:17px;
-moz-border-radius-topright:17px;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-bottomright:17px;
-webkit-border-top-left-radius:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
-webkit-border-bottom-right-radius:17px;
}
.button:hover {
background-color:#ffffff;
color:#161616;
font-size:18px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
}
.button-text {
padding:0 25px;
line-height:56px;
letter-spacing:3px;
}
Working example:
http://codepen.io/Riggster/pen/eNppgJ
Does anyone know how I stop this sharp animation from happening?
I have looked on stack overflow and the internet however all I can find is people having this issue, but with javascript or JQuery.
Thanks.
You need to set the transition declaration on the element you want to animate. Right now it is only on :hover, so the animation only occurs when hovering.
.button {
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
/* etc. */
}
.button:hover {
/* no transition declaration */
background-color: #ffffff;
color: #161616;
font-size: 18px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
}
Updated Codepen
How do I have the properties of a declaration apply to an element after the CSS3 transitions end? I have something like:
.something {
background: blue;
padding: 10px 0px;
background-clip: content-box;
transition: box-shadow 300ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 0px;
margin: 10px 0px;
}
I'd like the padding and margin properties in the :hover declaration to be applied after the transition is done in 300ms.
you can add a delay like this:
transition: box-shadow 300ms, padding 300ms 400ms;
The box-shadow transition will start on hover and last 300ms, and the padding will start after 400ms and again last 300ms.
.something {
background: blue;
color: white;
padding: 0px;
background-clip: context-box;
transition: box-shadow 300ms, padding 300ms 400ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 10px;
margin: 10px 0px;
}
<div class='something'>Something</div>
Article on CSS-Tricks
You can achieve this by placing another element inside or outside .something and applying padding and margin transitions to the new element, but with transition-delay value set to the time equal or greater than time of your initial box-shadow transition.
So, for instance:
<div class="immediate">
<div class="later">
I can haz transitions.
</div>
</div>
And CSS:
.immediate {
background: #eeb;
transition: box-shadow 300ms;
}
.immediate:hover {
box-shadow: 0 0 3px black;
}
.later {
margin: 0;
padding: 10px 0;
transition: all 400ms;
transition-delay: 300ms;
}
.later:hover {
margin: 10px 0;
padding: 0;
}
This will perform the box-shadow transition in 300ms, and afterwards margin and padding in 400ms (you can set this transition time to 0 if that's the effect you're looking for).
You can try it on jsFiddle: http://jsfiddle.net/gTVVk/2/
EDIT: Duncan Beattie's answer will do just fine, unless you need to perform different transitions on the same property. Otherwise there's no point to overcomplicate things with nested divs.
When using #Duncan Beattie´s solution one property will override the other.
This should work:
transition: box-shadow 300ms linear, padding 300ms linear 400ms;
Syntax:
transition: [property] [duration] [timing-function] [delay], ... more property-transitions
I am trying to tint images onHover. I have the css working but some of the images which have rounded edges or don't completely fill the parent show the black background:
(The far left has the mouse over it)
How can hide the black so only the img is tinted?
Here is my css:
.thumb {
width:150px;
height:150px;
margin: 0px 5px 14px 14px;
float:left;
display:inline;
background: black;
overflow:hidden;
cursor: pointer;
/*border: 2px solid #00A3C6; */
}
.thumb img {
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.thumb:hover img {
opacity: 0.7;
}
If the image has rounded corners, you can use border-radius in your css to set rounded corners of the "tint" container.
If the actual image has a white border... you're kind of out of luck. You can crop images but you don't have any way to doing this dynamically for any kind of image.
How can hide the black so only the img is tinted?
Try removing background: black from .thumb ?
P.S. display: inline is also not needed there
I want a div to float next to my input but instead it's floating over top of it, and I'm not sure why. It's as if the div is set to use absolute positioning. I think I'm probably just overlooking something silly, but what is it?
html:
<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>
css:
input { float: left;}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
//clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
I have an example here:
http://jsfiddle.net/sWrvU/
which is based on the read files demo on html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/
Uncomment clear:both to see the demo actually work (i.e. you can press the button because there's not a div on top of it), but then obviously the div still isn't floated next to the input.
Using display: block instead of opacity removes the transition, which I'm guessing you're trying to keep.
The Progress bar isn't "floating over top" so much as the input is floating underneath. If you float the progress bar as well, things should go a little better: http://jsfiddle.net/cjc343/sWrvU/24/
I changed it to use display instead of opacity since opacity means the element is still there even though it is transparent.
CSS
input {
float: left;
}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
display:none;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
display:block;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}