I've got a modal overlay where the css spinner rotates when first loaded, after hiding then showing again the spinner no longer rotates.
This only happens in Chrome and only happens when the spinner is not visible from the outset (ie if the div is hidden then toggled - the animation happens as expected). Is this a bug or have I missed something?
EDIT It seems to be the visibility that it doesn't like, commenting this out, everything performs as expected
It also seems to be a bug, behaves as expected in Canary 46
EDIT I've though this was a duplicate: CSS infinite animation after hidden is not resetted (Chrome), however that works in the same version of Chrome
document.getElementById('toggle').onclick = function() {
document.getElementById('loader').classList.toggle('out');
}
#holder {
margin-top: 50px;
position: relative;
height: 300px;
background: #cc0000
}
.loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 10%;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
visibility: visible;
opacity: 1;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-o-transition: opacity .5s linear;
transition: opacity .5s linear;
}
.loader.out {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<button id="toggle">Toggle Overlay</button>
</div>
<div id="holder">
<div class="loader" id="loader">
<i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
</div>
Related
I'm using the pseudo elements ::after and ::before for an animation on my buttons. I have reproduced this problem on 3 different platforms. It's hard to see but there's extra space on the corners. Zooming in makes it a bit easier to see.
I'm using Bootstrap but I've reproduced this with and without Bootstrap.
http://codepen.io/sinrise/pen/vLaGzN
<a href="#" class="btn btn-default btn-action">Test Button</button>
Normal
Hover
Updated
Made some more testing and research and found the real issue ... remove the z-index: 1; from the a.btn-action rule
a.btn-action {
position: relative;
overflow: hidden;
box-sizing: border-box;
color: black;
transition: color 0.4s;
transition-delay: 0.3s;
}
Updated codepen
Remove the transform3d transition for hover pseudo class and add height: 100%; for ::before and ::after pseudo selector targeting the hover animation you wanted to use.
a.btn-action {
position: relative;
box-sizing: border-box;
color: black;
transition: color 0.4s;
transition-delay: 0.3s;
}
a.btn-action::before, a.btn-action::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 0;
background: rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
z-index: -1;
box-sizing: border-box;
}
a.btn-action:hover::before,
a.btn-action:hover::after {
height:100%;
}
Modified Demo: Codepen
I want use transition effect in CSS3 but the effect doesn't work.
I think I probably made a mistake but I don't see where it is.
On hover, I want make a border with transition in pseudo-element before. I make a codepen : http://codepen.io/Tef/pen/JYBMgR
<div class="container wrap">
<div class="row">
<div class="box">
<a href="#">
<img src="http://placehold.it/90x90/000000" alt="" />
</a>
</div>
</div>
</div>
.wrap {
margin-top: 50px;
}
.wrap a {
position: relative;
display: inline-block;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.wrap a:hover:before {
content: '';
border: 7px solid #ffffff;
opacity: .7;
width: 90px;
height: 90px;
position: absolute;
left: 0;
top: 0;
}
There are a few issues in your code:
:before only exists on :hover, but it should always be there in order to show an animation.
transition is defined on a, but should actually be on a:before (which is conceptually a different DOM element).
There is no initial state of the border, so transition on hover will just start at defaults, and transition backwards on un-hover won't work. To solve this, just add an initial border state like 0px solid transparent.
Here's your fixed example: http://codepen.io/anon/pen/wKxmvB
Two main issues here. First, you're adding a transition the the anchor element, not it's "::before" pseudo-element. Secondly, you're setting no inital state for the pseudo-element, you're setting everything on hover. If you want to transition you need an initial state and an end state. For example:
.wrap {
margin-top: 50px;
a {
position: relative;
display: inline-block;
&::before{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
content: '';
border: 0 solid #ffffff;
opacity: 0;
width: 90px;
height: 90px;
position: absolute;
left: 0;
top: 0;
}
&:hover {
&::before {
border: 7px solid #ffffff;
opacity: .7;
}
}
}
}
Notice the transition is on the pseudo element, and I've set the initial values for the inital state for this element (opacity: 0 + border: 0)
I'm trying to add an animation over the button. A faded png that goes from left to right. Problem now is that it goes full width of parent element and not only just over the button.
HTML:
<div style="background: yellow; height: 30px">
<button class="btn-primary btn" style="margin-left: 100px">
Some button here
</button>
</div>
CSS:
.btn:hover:not([disabled]):not(.disabled):before, a.btn:hover:not([disabled]):not(.disabled):before, .swipe-glow:hover:not([disabled]):not(.disabled):before {
-webkit-transition: opacity 0s ease, left 0.4s linear;
transition: opacity 0s ease, left 0.4s linear;
left: 100%;
opacity: 1;
}
.btn:before, a.btn:before, a.btn:before, .swipe-glow:before {
-webkit-transition: opacity 0.3s ease 0, left 0s linear 0.3s;
transition: opacity 0.3s ease 0, left 0s linear 0.3s;
opacity: 0;
content:" ";
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
z-index: 100;
overflow: hidden;
background-size: cover;
background-image: url('//eaassets-a.akamaihd.net/battlelog/bb/bfh/ui/swiping-glow-408c7792.png');
}
JSFiddle:
http://jsfiddle.net/lasseedsvik/keanyvde/
How can I fix this?
Add:
.btn {position:relative; overflow:hidden;}
http://jsfiddle.net/keanyvde/4/
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display: inline-block;
position: relative;
overflow: hidden;
}
.tricky_image {
width: 100%;
height: 100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity: 0.7;
border-radius: 50%;
filter: alpha(opacity=70);
overflow: hidden;
}
.tricky_image:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="tricky">
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
</div>
</body>
</html>
my desired effect is only working in Firefox and i assume IE. I am starting with a transparent image with a div wrapper around it with a blue background. When the user hovers over the image, i want it to zoom in and restore the opacity to 100% without breaking the set width and height of the div wrapper. This works perfectly in Firefox, but when i run the animation in Chrome the image exceeds the width of the blue div wrapper behind it. Here is my code and any help would be appreciated & JS Fiddle http://jsfiddle.net/yaLupdzo/1/:
<!doctype html>
<html>
<head>
<style>
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display: inline-block;
position: relative;
overflow: hidden;
}
.tricky_image {
width: 100%;
height: 100%;
-moz-transition: all .6s ease;
-webkit-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
opacity: 0.7;
border-radius: 50%;
filter: alpha(opacity=70);
overflow: hidden;
}
.tricky_image:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="tricky">
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
</div>
</body>
</html>
This is a known issue as filed here: https://code.google.com/p/chromium/issues/detail?id=157218
In Webkit, with hardware acceleration, animated layers get promoted to a different rendering surface during animation, and then demoted once the animation is complete.
Turns out there is a simple solution. Have the container element 'promoted' to the same rendering layer as the hardware accelerated child by adding a lightweight animation to it:
.tricky {
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background: #2373bd;
display: block;
overflow: hidden;
-webkit-transform:scale(1.0);
}
.tricky_image {
width: 200px;
height: 200px;
-webkit-transition: all .6s ease;
opacity: 0.7;
}
.tricky:hover {
-webkit-transform:scale(1.0);
}
.tricky:hover .tricky_image {
opacity: 1;
-webkit-transform:scale(1.2);
}
See: http://jsfiddle.net/yaLupdzo/3/
Note that I've also added a simple animation to the parent container's default state, so that the same issue doesn't happen when hovering out.
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
You can repeat your code like that for browser compatibility..
http://justxp.plutohost.net/gxx/
Try hovering the buttons.
The hover / link will only work if you hover on the head of the buttons.
Why is this happening?
This is the code:
<a href="#">
<div class="button-1">
<span class="bebas">play</span>
</div>
</a>
<a href="#">
<div class="button-1">
<span class="bebas">community</span>
</div>
</a>
<a href="#">
<div class="button-1">
<span class="bebas">account help</span>
</div>
</a>
css
.button-1 {
background-image: url("../img/buttonoff.png");
background-repeat: no-repeat;
width: 302px;
height: 82px;
margin-left: 1.4%;
margin-top: 1%;
float: left;
text-align: center;
line-height: 90px;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.button-1:hover {
background-image: url("../img/buttonon.png");
background-repeat: no-repeat;
width: 302px;
height: 82px;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
I see nothing wrong with that?
I tried making the height bigger, still doesn't work.
I'm very curious about this!
You need to add a margin on your class news:
.news {
position: relative;
top: 5%;
margin-top: 65px;
}
Edit:
Bonus! Please use css3 background gradients instead of images on background of your buttons.
gradients.glrzad.com
Hope this helps, sorry if I miss interfered.
Your this div is overlayering the buttons
<div class="news">
what you can do is :
Either you add this:
<br clear="all"/> //<---add this just above the div class named "news"
or you can adjust your css for the div class news:
.news {
position: relative;
top: 24%;
}