I want to use Codepen example in my code, but when I copy and pasted the css none of the animation works, I inspected the css using Chrome and all the animation are crossed out, any idea?
.loading > div > .c4 {
top: auto;
bottom: 10px;
transform-origin: 20px -4px;
animation: spin-d 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
Chrome and Safari, you have to use -webkit-animation. For Firefox you have to use -moz-animation. For Opera you need -o-animation. See the Compatibility Table in MDN.
Codepen apparently detects the browser version and rewrites the CSS accordingly.
Related
I found the animation below for a screensaver I'd like to use for digital signage. Problem is, it wont work with IE11, the only browser supported on the target system.
What needs to be changed to make it work? I can't find on caniuse.com what feature isn't working in IE.
Codepen: https://codepen.io/scottkellum/pen/BoZvjR
IE11 Debug Link: https://s.codepen.io/scottkellum/debug/BoZvjR
Code with SCSS removed:
body {
margin: 0;
}
img, div {
width: 100px;
height: 100px;
}
.x {
animation: x 13s linear infinite alternate;
}
.y {
animation: y 7s linear infinite alternate;
}
#keyframes x {
100% {
transform: translateX( calc(100vw - 100px) );
}
}
#keyframes y {
100% {
transform: translateY( calc(100vh - 100px) );
}
}
<div class="x">
<img class="y" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" alt="codepen" />
</div>
If it isn't possible to use that exact way, is there another way to bounce an image around the screen?
EDIT: I can't finde the solution in the proposed answer of CSS3 animation is not working in IE11 but works in other browsers: There is no running statement in the animation, I tried adding the overflow:visible and the containers don't change size.
I found it out, I looked up every CSS3 function on icanuse.com again, and it turns out, calc() doesn't work inside transform in IE10, IE11, and Edge < 14.
I can live with the workaround of setting the screen dimensions manually (it's for digital signage and the screen will always be shown on full HD)
I am trying to rotate a div with this dead-simple code:
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
border-bottom: 1px solid #f00;
animation: rotate-bottom 1s linear infinite;
}
#keyframes rotate-bottom {
from {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(0deg);
}
to {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
I created a jsfiddle using the code above: http://jsfiddle.net/zg8vdyns/1/
Everything works fine on Chrome and Internet Explorer. A red curved line rotates in an endless, smooth and steady loop. However, firefox (39.0) seems to have issues rendering the animation (both the windows and linux build). First, the spinning line is much shorter than it should be. Second, the animation keeps faltering intermittently (it is not smooth). This looks like a firefox bug. Does anyone have a deeper insight into this issue?
Btw I know I should probably prefix 'animation' and 'keyframes' with '-moz-' but that is not the issue here.
Your issue is half-pixel/sub-pixel rendering. Playing around and changing border-bottom: 1px solid #f00; to border-bottom: 3px solid #f00; shows that animation is ok, but the rendering is very different from other browser engines... From another answer here of StackOverflow: Firefox CSS Animation Smoothing (sub-pixel smoothing)
The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
That said it appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
But, differently from the approach provided by the answer in the link, in your scenario I think that there is a easier way to make the rendering more equivalent: http://jsfiddle.net/zg8vdyns/7/
Adding border-left: 1px solid rgba(255, 0, 0, 0.7); will kinda "force" the rendering of the half-pixels/sub-pixels that FireFox doesn't naturally...
Update:
#joshin855 also give a great answer below: adding the property background:rgba(255,255,255,0.01); will kinda "force" the rendering of the half-pixels/sub-pixels too. Your solution is very nice... It only have the disadvantage of a filled circle which depending on the scenario may not be suitable, but the line animation seems even more equivalent than in my solution... So, it also may be a good solution.
As far the line being a dot you can add background:white; or background:RGBA(255,255,255,.01); to the element which should fix the problem and make it look similar to other browsers. Sorry it's not a great answer just thought I would throw in my 2 cents.
.spinner {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
border-bottom: 1px solid #f00;
animation: rotate-bottom 1s linear infinite;
background:RGBA(255,255,255,.01);
}
http://jsfiddle.net/fqqko0uv/2/
I'm able to run my script fine within JSFiddle, but when I try to run within Chrome or IE11 on my website, there is no response to hovering. Anybody have any advice? I know I'm missing something obvious here.
It's saved as an HTML webpage when I try to run within my website, and the CSS is (for now) on the same document as the HTML.
#backgroundBox{
z-index:-1;
left:50%;
top:50%;
background-color:#cdcba9;
width:400px;
height:400px;
position:absolute;
margin-left:-200px;
margin-top:-200px;
}
#backgroundBox:hover div{
-webkit-animation-play-state:running;
animation-play-state:running;}
.ball {
z-index:1;
border: 20px solid #356db4;
border-top: 20px solid rgba(0,0,0,0);
border-left: 20px solid rgba(0,0,0,0);
border-radius: 400px;
width: 400px;
height: 400px;
margin: 0 auto;
position:relative;
top:-295px;
left:-20px;
-moz-animation: spin 3s infinite linear;
-webkit-animation: spin 3s infinite linear;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
http://jsfiddle.net/g5zQ8/3/
Thank you for your help!
Try doing a difference check on your page source and Vorenus's page source or run your page source through the W3C validator. I saved it and it works fine locally in Chrome, even when not using a proper HTML5 doctype.
This seems to work fine when I translate it to a standalone file, see:
http://www.saltcollective.com/stuff/bike.html
Is it possible that you're borking the HTML/CSS somehow?
I converted the JSFiddle to a single file (http://jsbin.com/fanesihi/1/edit) and it worked fine.
If you are implementing this into a website, and it isn't working than it is one of two things:
1) Incorrect implementation. Perhaps some of the CSS wasn't copied or something of that nature.
2) Other CSS within your site is overriding the animation CSS class.
In order to truly debug the issue, I'd need to see an example of it not working.
As a side note, remember to include non-browser prefixed version of your keyframe animations. Also, your trailing semicolons within the keyframe blocks CAN cause issue strange bugs further down in the stylesheet (just saw that issue on here a couple days ago)...it would be best to remove them:
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spinoff {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
I am animating a heading on a site and the animation is working in firefox but not in chrome.
I have the correct prefixes in firefox, if you use this code and switch the prefixes to moz it animates absolutely fine in firefox, heres the code for chrome:
HTML
<div class="page-header-con">
<div class="page-header">
<h1>test</h1>
</div>
</div>
CSS
.page-header-con {
perspective: 100px;
}
.page-header:hover {
-webkit-transform: rotateX(360deg);
}
.page-header {
-webkit-transition: all 0s ease 0s, all 1s ease 0s, all 0s ease-in 0s, all 0s ease 0s;
-webkit-transform: rotateX(0deg);
}
Am I missing something that is specifically needed for chrome?
Chrome doesn't seem to like the multiple transitions (not sure why you'd have them in the first place), so I kept removed all the ones that wouldn't do anything, aka all the ones with 0s duration. Firefox seems to ignore these other transition values
Updated jsFiddle
In addition, you need to play around with transform-origin (and the webkit prefixed version) in order to get the effect you desire. The default, for me is seems, in Firefox is top left, so if you want Chrome to look like that you need to put -webkit-transform-origin: top left; in the hover CSS for the element
More information on transform-origin
I facing problem using marquee tag, when opening in the chrome browser looks perfectly but when we open in firefox there are totally black shows.
Do not use <marquee>
According to Wikipedia
The marquee tag is a non-standard HTML element which causes text to
scroll up, down, left or right automatically. The tag was first
introduced in early versions of Microsoft's Internet Explorer, and was
compared to Netscape's blink element, as a proprietary non-standard
extension to the HTML standard with usability problems. It is
deprecated by the W3C and not advised by them for use in any HTML
documents.
if you still want marquee to work as expected see this
http://remysharp.com/demo/marquee.html
Using just CSS, as your tags say, a solution would be to use keyframe animations. However, keyframe animations are not supported in IE9 or older (IE10 supports them and so do all current versions of Chrome, Firefox, Safari and Opera).
Example using keyframe animations: http://dabblet.com/gist/3155878
HTML
<div class="carousel-wrapper">
<ul class="logo-list">
<li><img src="logo-img1.jpg">
</li><li><img src="logo-img2.jpg">
</li><!--many more list items just like this-->
</ul>
</div>
Basic CSS
.carousel-wrapper {
width: 32em;
height: 9em;
margin: 10em auto;
padding: 0;
border: solid 1px #ccc;
overflow: hidden;
}
.logo-list {
margin: 0 0 0 16em;
padding: .5em 0;
white-space: nowrap;
animation: scrollme 35s infinite linear alternate;
}
.logo-list li {
padding: .25em;
display: inline-block;
}
.logo-list a {
width: 10em;
height: 7.5em;
border: solid 1px #ccc;
display: block;
}
#keyframes scrollme {
to {margin-left: -173em;}
/* 173em = 18 list items * 10.5em - 16em
(10.5em = 10em width + 2*.25em paddings left and right)
(16em = half the width of the wrapper) */
}
Solutions for IE9 and older:
1. Use JavaScript. With jQuery, it's as easy as:
$('.logo-list').animate({ marginLeft: '-173em'}, 35000, 'linear');
Demo here http://jsfiddle.net/thebabydino/gTRXQ/1/
However, if JavaScript is disabled, the user will only see the first images (unless he selects and drags... which most users don't).
2. Just CSS. Well, the exact same effect (auto-scrolling) cannot be achieved, but there are a few options.
Fist of all, add .lt-ie9 and .ie9 classes on the <html> element:
<!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
so that you could do something different.
a) First option: the ugly option. No auto-scrolling, just leave a horizontal scrollbar on the wrapper (and of course increase its height) so that the user can scoll to see all images.
.ie9 .carousel-wrapper, .lt-ie9 .carousel-wrapper {
height: 10em;
overflow-x: scroll;
}
b) Second option: works only when there aren't that many images. Stack them up and reveal them on hover - something like I did in this gallery: http://jsfiddle.net/thebabydino/F7MKy/6/
c) Option that will only work in IE9, but you could use option a) or b) as fallback for older versions. Add some kind of navigation, like this http://dabblet.com/gist/3156683 (view it in IE9).
d) Ugly option #2. Go back to marquee just for IE9 and older (using conditional comments).
What I would do:
To begin with, add a class .no-js to the <html>
Use Modernizr to remove it if JavaScript is not disabled. In this case, use the JavaScript version of the auto-scrolling.
If JavaScript is disabled, but animations are supported, use keyframe animations. In this case, the .no-js class was not removed, so:
.no-js .logo-list { animation: scrollme 35s infinite linear alternate; }
If neither JavaScript nor animations are supported, try another one of the options I've listed at point 2.
You should correct the structural errors in your site.
For instance, the marquee is inside an <ul> element, but outside of any <li> elements. I'm sure browsers will have a problem with this!
So make sure the site validates on http://validator.w3.org/ before continuing.