I have a page element that is CSS3, I want transit image from left to right with fadeout.
It works perfectly in Chrome, Firefox, IE, OP, but not in Safari 5.1.7 windows.
Any help is highly appreciated.
JS FIDDLE LINK
HTML
<li class="product">
<div class="image"><img src="http://elektronika.techtestbox.com/images/product.png"></div>
<span>Products</span>
</li>
CSS
.product .image img
{
animation:fadeOutRight 5s linear infinite;
-moz-animation: fadeOutRight 5s linear infinite;
-webkit-animation: fadeOutRight 5s linear infinite;
-o-animation: fadeOutRight 5s linear infinite;
}
#-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
#keyframes fadeOutRight {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
JS FIDDLE LINK
Try this...
#-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate(100px, 0px);
transform: translate(100px, 0px);
}
}
translate3d some problem for windows safari..
Demo Link:
http://jsfiddle.net/5a1q8sen/2/
Related
I have one SVG image and I have added animation on it using CSS it works fine in Chrome and Mozilla, and also on Android but not working on iOS both Chrome and Safari.
The problem is that I can see the image displayed but the animation spinning is not working.
I have the following animation applied to my simple SVG:
<img class="img-sth"src="/img/image.svg">
The css code:
.img-sth {
position: absolute;
height: 80px;
top: -3px;
left: 16px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Below see snippet where I added the 0% {} to each #keyframes definition. Your code did not work for me on macOS Safari (desktop) either when I initially tested it so I thought it may have been an issue with how the #keyframes animation was defined. See MDN docs for more info.
I used a placeholder image for the demo and tweaked the positioning so it was all in the viewport.
.img-sth {
position: absolute;
height: 80px;
top: 20px;
left: 20px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster {
0% {}
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
<img class="img-sth"src="https://via.placeholder.com/80x80">
I'm relatively new to CSS. I saw a lot of similar topics but I couldn't find a solution to this problem so I'll ask away.
I'm trying to create a photobanner with a keyframe animation where the images scroll to the left and scale with img:hover. The translation transform works fine and the scale transform works fine however, the latter only works if I remove the css for the keyframe animation. How can I get both transformation to work at the same time?
My CSS is as follows:
.photobannerContainer {
margin: 0 auto;
width: 90%;
overflow: hidden;
}
.photobanner {
height: 480px;
width: 8000px; /* To contain all the images end-to-end. */
}
.photobanner img {
height:100%;
transition: all .2s ease;
/*If I remove these lines then the scale transformation will work.*/
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
.photobanner img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#keyframes bannermove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-3726px);
}
}
#-moz-keyframes bannermove {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-3726px);
}
}
#-webkit-keyframes bannermove {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-3726px);
}
}
#-ms-keyframes bannermove {
0% {
-ms-transform: translateX(0);
}
100% {
-ms-transform: translateX(-3726px);
}
}
#-o-keyframes bannermove {
0% {
-o-transform: translateX(0);
}
100% {
-o-transform: translateX(-3726px);
}
}
The HTML is set up as follows:
<div class="photobannerContainer">
<div class="photobanner">
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
</div>
</div>
Thank you.
i have the problem today,and i dont know the reason too,but i solved it by add a extra div tag out side animation-div tag,and put transition in the outside div
like:
html
<div class="extra-div">
<div class="animation-div">
</div>
</div>
CSS
.extra-div{
transition: all .2s ease;
}
.extra-div:hover{
transform: scale(1.9);
}
.animation-div {
animation: myAnime 0.2s ease-out
}
I'm using CSS to achieve a 'pulsating' or 'throbbing' effect.
.throb {
border: 3px solid #555;
height: 50px;
width: 50px;
-webkit-border-radius: 50%;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0;
z-index: 999;
}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1); opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
-webkit-transform: scale(1.2, 1.2); opacity: 0.0;
}
}
See demo: http://jsfiddle.net/kJ6ZG/
Source: https://stackoverflow.com/a/4911441/1709033
It works fine in Chrome and Safari. However it doesn't seem to work in the following browsers:
FireFox
Internet Explorer
How can I modify the CSS so that the effect works in FF and IE?
You need to add the relevant browser/vendor prefixes, the -webkit- part in your CSS specifically targets webkit browsers like chrome, by adding similar styles without this part it will work in FireFox (per below example), by changing the webkit part to ms it will work in Explorer.
The standard prefixes are:
-webkit- for webkit browsers (Safari, Chrome)
-ms- for MSIE
-moz- for Firefox
-o- for Opera, removing the prefix will represent the base property which is often already accepted by some browsers regardless of their specific prefix. If you arent sure, you can always look at caniuse.com
Demo Fiddle
CSS
.throb {
border: 3px solid #555;
height: 50px;
width: 50px;
-webkit-border-radius: 50%;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-ms-border-radius: 50%;
-ms-animation: pulsate 2s ease-out;
-ms-animation-iteration-count: infinite;
-moz-border-radius: 50%;
-moz-animation: pulsate 2s ease-out;
-moz-animation-iteration-count: infinite;
-o-border-radius: 50%;
-o-animation: pulsate 2s ease-out;
-o-animation-iteration-count: infinite;
border-radius: 50%;
animation: pulsate 2s ease-out;
animation-iteration-count: infinite;
opacity: 0;
z-index: 999;
}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
-webkit-transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
#-moz-keyframes pulsate {
0% {
-moz-transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
-moz-transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
#-ms-keyframes pulsate {
0% {
-ms-transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
-ms-transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
#-o-keyframes pulsate {
0% {
-o-transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
-o-transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
This is code that I am using to rotate a image:
<style>
#logo1{ position: absolute;
-moz-animation: 3s rotate infinite linear ;
-moz-transform-origin: 50% 50%;
-webkit-animation: 3s rotate infinite linear ;
-webkit-transform-origin:50% 50%;
}
#-moz-keyframes rotate {
0 { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); }
}
</style>
This code is working fine for firefox, safari and chrome. But its not working for Internet Explorer. What changes I need to do please help....
<style>
#logo1{ position: absolute;
animation:3s rotate infinite linear ;/* IE 10 */
transform-origin:50% 50%;/* IE 10 */
-moz-animation: 3s rotate infinite linear ;
-moz-transform-origin: 50% 50%;
-webkit-animation: 3s rotate infinite linear ;
-webkit-transform-origin:50% 50%;
}
#-moz-keyframes rotate {
0 { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate{
0 { transform: rotate(0);} /* IE 10 */
100% { transform: rotate(360deg);} /* IE 10 */
}
</style>
jsfiddle demo
You can use transform for IE 10/11, and -ms-transform for IE 9.
More compatibility info: http://caniuse.com/#search=transform
If you need support for older IE add this too:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
I am running into problems with getting cross-browser animation of a ball on a webpage I am developing.
The football starts off hovering when the user arrives on the webpage. When the user scrolls and the football hits the top of the screen, using Jquery Waypoints, I remove the hovering animation and add the spinning, translating animation so that the football moves diagonally(spinning) down the page to the next section. In Firefox, the ball hovers perfectly and in Chrome the ball doesn't hover at all. When the element hits the top of the page in Chrome the ball rotates and translates however in Firefox the ball does not rotate and only translates.
The HTML:
<div id="footy">
<img id="kick" class="object footy float" src="<?php echo drupal_get_path('theme', 'footykids'); ?>/bootstrap/img/footy.png">
</div>
The CSS:
.footy {
z-index: 1999;
width: 150px;
height: auto;
}
.drop-punt {
transform: translate(360px, 360px) rotate(-360deg);
-webkit-transform: translate(360px, 360px) rotate(-360deg);
-o-transform: translate(360px, 360px) rotate(-360deg);
-moz-transform: translate(360px, 360px) rotate(-360deg);
}
.object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
.float {
animation: floating 2s infinite linear;
-webkit-animation: floating 2s infinite linear;
-moz-animation: floating 2s infinite linear;
-ms-animation: floating 2s infinite linear;
-o-animation: floating 2s infinite linear;
}
#-webkit-keyframes floating{
0% {
transform: translate(0px, -10px);
}
50% {
transform: translate(0px, 10px);
}
100% {
transform: translate(0px, -10px);
}
}
#-moz-keyframes floating{
...
}
#-ms-keyframes floating{
...
}
#-o-keyframes floating{
...
}
#keyframes floating{
...
}
JQuery using Waypoints:
( function ($) {
$( document ).ready( function() {
$('#kick').waypoint(function() {
$("#kick").removeClass("float");
$("#kick").addClass("drop-punt");
});
});
});
(jQuery);
The webkit animation can be fixed by changing the keyframes to:
#-webkit-keyframes floating{
0% { -webkit-transform: translate(0px, -10px); }
50% { -webkit-transform: translate(0px, 10px); }
100% { -webkit-transform: translate(0px, -10px); }
}
The Firefox issue can be fixed by adding a rotation to the keyframes:
#-moz-keyframes floating{
0% { -moz-transform: translate(0px, -10px) rotate(0deg); }
50% { -moz-transform: translate(0px, 10px) rotate(0deg); }
100% { -moz-transform: translate(0px, -10px) rotate(0deg); }
}
Demo fiddle