Can somebody help me, please. I'm starting with css animations and transforms. What i want is an infinite rotation of a division (with svg inside). My css/html5 concoction works fine in Firefox but not in Google Chrome. I'm not sure where the problem lies. This is the link:
Infinite CSS Rotation
And a second step I want to control the animation with jQuery. This again doesn't work in Chrome but it does in FF. The link to this extended example:
Infinite CSS Rotation with jQuery control
Any clue will be much appreciated.
Try this,you forgot #keyframe and -webkit-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rotate Infinitely</title>
<style type="text/css">
#container {
background-color:rgba(245, 168, 66, 0.4);
height:250px;
margin:50px auto;
width:250px;}
#rotate1 {
-webkit-animation: rot_inf 5s infinite linear;
animation: rot_inf 5s infinite linear;
}
#keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
#-webkit-keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
</style>
</head>
<body>
<div id="container">
<div id="rotate1"><img width="250" height="250" alt="cog" src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div>
</div>
</body>
</html>
Here is a simple example based on:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
at the bottom of the page it provides a webkit animation demo which I edited in order to demonstrate the -webkit-animation-play-state
jsfiddle
In short it could be accomplished by detecting the current animation state, and based on that set -webkit-animation-play-state to running or paused
html:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
click
js:
$('a').click(function(){
var $p = $('.hi');
var state = $p.css("-webkit-animation-play-state")
console.log(state);
if (state == "running"){
$p.css("-webkit-animation-play-state", "paused");
} else {
$p.css("-webkit-animation-play-state", "running");
}
return false;
})
css:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
Rotate division infinite using css and html
css code is :
<style>
div{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
div in HTML
<html>
<body>
<div><img src="xyz.png" height="200px" width="200px"/></div>
</body>
</html>
in div a image rotate infinite
Related
I have a circle logo, with text on the outside, and a small circle in the middle. I plan to make the logo spin using some CSS3. That's relatively easily.
The tricky bit is that I want to make the logo change to BLACK when it's over a pink div, and change to WHITE as it moves over the black part...
I think this is achieved with a mask or a filter, but I just cannot work out how to do it...
I've setup a codepen with a basic example:
https://codepen.io/anon/pen/JQYQdp
<div class="main-header">
<div class="spinning">
<img src="https://i.ibb.co/pKVwqhY/test-logo.png" alt="test-logo" border="0">
</div>
</div>
<div class="pink">
</div>
CSS:
.main-header {
width:100%;
background-color:black;
height:200px;
}
.pink {
width:100%;
background-color:pink;
height:200px;
}
.spinning {
position:absolute;
z-index:2000;
height:200px;
width:200px;
top:100px;
right:0;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
As the text of the image spins over the PINK background, I want that part of the text to be black, whilst the top half is still white...
mix-blend-mode will get you most of the way.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
MDN
.main-header {
width: 100%;
background-color: black;
height: 200px;
}
.pink {
width: 100%;
background-color: pink;
height: 200px;
}
.spinning {
mix-blend-mode: difference;
position: absolute;
z-index: 2000;
height: 200px;
width: 200px;
top: 100px;
right: 10px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="main-header">
<div class="spinning">
<img src="https://i.ibb.co/pKVwqhY/test-logo.png" alt="test-logo" border="0">
</div>
</div>
<div class="pink">
</div>
I have a keyframe animation effect on 2 banners on my homepage. I have defined each banner to have a different class so I could choose a different speed for each animation. The HTML looks like this:
HTML
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container">
<img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image">
</span>
</div>
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container-20">
<img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image-20">
</span>
</div>
The CSS Code looks like this:
CSS
/* ------------ Ken Burns 10 Secs ------------- */
.ken-burns-container {
overflow: hidden;
}
.ken-burns-image {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: 10s ease-in 0s 1 scaleout;
-webkit-animation: 10s ease-in 0s 1 scaleout;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(20);
}
}
/* ------------ Ken Burns 20 Secs ------------- */
.ken-burns-container-20 {
overflow: hidden;
}
.ken-burns-image-20 {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: 20s ease-in 0s 1 scaleout;
-webkit-animation: 20s ease-in 0s 1 scaleout;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(1.17);
}
}
Heres a JS Fiddle: https://jsfiddle.net/shan_2000_uk/yhf4dzrx/10/
Both of these bits of CSS work fine on their own. It seems that there is a conflict with the last block of code that defines the scale:
#-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(20);
}
}
If I remove this block from either of the sections, the other works fine.
I have tried adding the class to this block like so:
.ken-burns-container-20 #-webkit-keyframes scaleout {
0% { transform: scale(1); }
100% {transform: scale(1.17);
}
}
But this doesn't seem to work.
Does anyone know, A: Why the code is conflicting and B: A way to use both bits of code without them conflicting?
Thanks a lot for taking the time to look!
You're just overriding the first #keyframe rule with the last one, you'll probably need to name them with different names, let's scaleout1 for the first #keyframe and scaleout2 for the last #keyframe.
Here's a demo:
.ken-burns-container, .ken-burns-container-20 {
overflow: hidden;
}
.ken-burns-image {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: scaleout1 10s ease-in;
animation-fill-mode: forwards;
}
.ken-burns-image-20 {
width: 100%;
height: 100%;
background-size: cover;
background-clip: border-box;
animation: scaleout2 20s ease-in;
animation-fill-mode: forwards;
}
/* keyframes */
#keyframes scaleout1 {
0% { transform: scale(1); }
100% { transform: scale(20); }
}
#keyframes scaleout2 {
0% { transform: scale(1); }
100% { transform: scale(1.17); }
}
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container">
<img src="https://via.placeholder.com/300x300" class="ken-burns-image">
</span>
</div>
<div class="subpage-image-sca">
<span class="subpage-image ken-burns-container-20">
<img src="https://via.placeholder.com/500x500" class="ken-burns-image-20">
</span>
</div>
Hope I pushed you further.
I'd like to spin an image and I came across this video https://www.youtube.com/watch?v=nD8xqlh6Esk which gave a very simple way to spin a div on a click. I thought this would be a great method to spin an image on a page load with minimal css so tried using a :after as opposed to a :click (with 720 deg) but that didn't work. Has anyone got this approach to work on a page load rather than on a click? I've seen other methods but they need quite a bit more css.
Detail provided
[Apparently my youtube link is to a football match although for me it's to a LevelUp Tuts CSS Experiments #1 - Card Flipping Effect video.]
Basically, he flips a card through a simple transform on a hover as follows:
<div class="card"></div>
.card {
background: blue;
width: 200px;
height: 200px;
}
.card:hover {
transform: rotateY (90deg);
}
So you can spin the div with a single line, a transform, on a hover. There's no need for keyframes.
Try this:
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s infinite;
-webkit-animation: spin 2s infinite;
}
#keyframes spin{
to{
transform: rotate(360deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotate(360deg);
}
<div id="d"></div>
EDIT: is this more like what you wanted?
div {
width: 100px;
height: 100px;
background: red;
animation: spin 2s forwards;
-webkit-animation: spin 2s forwards;
}
#keyframes spin{
to{
transform: rotateY(90deg);
}
}
#-webkit-keyframes spin{
to{
transform: rotateY(90deg);
}
}
<div id="d"><img src="http://img4.wikia.nocookie.net/__cb20120208185721/logopedia/images/5/54/Barclays_Premier_League_logo_(shield).gif" width="100px" height="100px"></div>
You need animation as well, not just transition:
http://jsfiddle.net/rudiedirkx/AB277/95/
The magic:
.card {
animation: spinn 5s linear infinite;
/* you don't need transition at all */
}
#keyframes spinn {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(720deg); }
}
For some reason, Chrome still needs prefixes.
More info on css-tricks.
this animates the object as soon as the css and the html load:
(http://jsfiddle.net/oemtt7cr/)
#-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(720deg);
}
}
#keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(720deg);
}
}
.container {
-webkit-perspective: 2000px;
}
.card {
margin: 20px;
background: #990;
width: 200px;
height: 200px;
animation: spin 5s ease;
-webkit-animation: spin 5s ease;
}
<div class="container">
<div class="card">flipy</div>
</div>
Use .card:hover instead of .card:after if you like the animation start when user move in with cursor.
http://jsfiddle.net/AB277/90/
.card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.card:hover {
transform: rotateY(720deg);
}
Or if you like the animation at page load, use the following script.
http://jsfiddle.net/AB277/93/
<div id="card"
</div>
var elm = document.getElementById('card');
elm.classList.add('cardMove');
#card {margin 20px;
background: blue;
width: 200px;
height:200px;
transition: all 5s;
}
.cardMove {
transform: rotateY(720deg);
}
I've been searching the answer for awhile but all I can see is translating an object in circular path. Is there a way to translate an element on an ellipse path given the semiminor and semimajor axis? Thanks alot!
the jfiddle of belows answer
css3
Have a look at this page, it explains mostly all you should know about translations with CSS3. Just as reminder: it is also possible to set keyframes you could use to definie your edge points of a spline you want to animate.
keyframes are explained here.
in your case it is a animation of two nested elements.
#1 for the picture or element you want to animate, where you define a X tranlate with ease
#2 and one as outer box for that #1 you animate the Y translate with.
if you arrange them clever in the same timescale but different ease in or out you can make your ellipse happen.
<style>
.viewport {
position:relative;
width:640px;
height:480px;
border:1px dashed #000;
}
.moveX {
position:absolute;
background:#f00;
height:2px;
width:480px;
top:240px;
left:0px;
-webkit-animation: mX 5s ease-in-out 0s infinite;
animation: mX 5s ease-in-out 0s infinite;
}
.moveY {
position:absolute;
width:480px;
height:100px; top:-50px;
border:1px solid #333;
-webkit-animation: mO 5s linear 0s infinite;
animation: mO 5s linear 0s infinite;
}
.elipsoid {
position:absolute;
background:url('http://placehold.it/100/00f/fff/&text=>°))><');
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border-radius:50%;
}
#keyframes mO {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes mO {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes mX {
0% { transform: translateX(0px); }
50% { transform: translateX(160px); }
100% { transform: translateX(0px); }
}
#-webkit-keyframes mX {
0% { -webkit-transform: translateX(0px) }
50% { -webkit-transform: translateX(160px); }
100% { -webkit-transform: translateX(0px) }
}
</style>
<div class="viewport">
<span class="moveX">
<div class="moveY"><span class="elipsoid"></span></div>
</span>
</div>
I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:
HTML
<div class="right">
<div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>
CSS
.landing .board .right {
width: 291px;
height: 279px;
background: url('../images/landing/key-pnl.png');
bottom: 16px;
right: 250px;
position: absolute;
}
.landing .board .right .key-arm {
position: absolute;
left: 44px;
top: 18px;
width: 41px;
height: 120px;
}
/*=== Key Arm Animation ===*/
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes keyarm {
0% { -moz-transform: rotate(0deg); }
5% { -moz-transform: rotate(-14deg); }
10% { -moz-transform: rotate(0deg); }
}
#-ms-keyframes keyarm {
0% { -ms-transform: rotate(0deg); }
5% { -ms-transform: rotate(-14deg); }
10% { -ms-transform: rotate(0deg); }
}
#-o-keyframes keyarm {
0% { -o-transform: rotate(0deg); }
5% { -o-transform: rotate(-14deg); }
10% { -o-transform: rotate(0deg); }
}
#keyframes keyarm{
0% { transform: rotate(0deg); }
5% { transform: rotate(-14deg); }
10% { transform: rotate(0deg); }
}
.right .key-arm{
-webkit-transform-origin: 12px 105px;
-moz-transform-origin: 12px 105px;
-ms-transform-origin: 12px 105px;
-o-transform-origin: 12px 105px;
transform-origin: 12px 105px;
-webkit-animation: keyarm 8s ease-in-out 0s infinite;
-moz-animation: keyarm 8s ease-in-out 4s infinite;
-ms-animation: keyarm 8s ease-in-out 4s infinite;
-o-animation: keyarm 8s ease-in-out 4s infinite;
animation: keyarm 8s ease-in-out 0s infinite;
}
Ok this doesn't work in Safari as I said, there's no movement whatsoever.
Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!
What am I doing wrong?
Thanks
Mauro
UPDATE: Ok from your answers I got that #keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using #keyframes!
here's the CSS code:
.board .rays{
background: url("../images/landing/rays.gif") no-repeat 0 0 red;
height: 381px;
left: 251px;
opacity: 1;
top: 80px;
width: 408px;
position: absolute;
}
.board .bottle{
background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
bottom: 30px;
height: 405px;
left: 276px;
width: 357px;
z-index: 1;
position:absolute;
}
/*=== Rays Animation ===*/
#-webkit-keyframes rays{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes rays{
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
.board .rays{
-webkit-animation: rays 40s linear 0s infinite;
-moz-animation: rays 40s linear 0s infinite;
animation: rays 40s linear 0s infinite;
}
And the html:
<div class="board">
<div class="rays"></div>
<div class="bottle"></div>
</div>
Try it yourself in jsFiddle (if you have Safari 4) and you'll see
Found the solution. In Safari when you use Keyframes you need to use the whole percentage:
this won't work:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
this will:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
I was having troubles with CSS3 animation working in Safari 6, but not in Safari 4 (4.0.5).
It appears that the shorthand notation will not work in Safari 4.
So this won't work :
-webkit-animation: rays 40s linear forwards;
But this will work :
-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
In situations where you're trying to animate transform on something as soon as it's injected into the DOM, I've had to add a very brief delay, like this:
animation: rays 40s linear 0.01s infinite;
I struggled with an animation working in Safari 14 (14.1.2), but not in Safari 15, and thought I'd add my findings here.
This css is part of the scrolling text loop here.
#banner-loop {
white-space: nowrap;
animation: loop-anim 5s linear infinite;
}
#keyframes loop-anim {
0% { margin-left: 0; }
100% { margin-left: -50%; }
}
I noticed that the animation "played", but didn't animate.
I tried the solutions from the other answers here, but nothing worked (including having the -webkit prefix). In the end the problem was solved by changing the start keyframe value to 0% instead of 0.
It looks like Safari can't handle the unit-less 0 shorthand in this case.
Try force quitting Safari and/or rebooting your phone (assuming you're on a phone).
Just had animations fail in Safari 15 for no apparent reason - very simple ones such as opacity and simple keyframes.
I noticed my phone was doing that thing where the white homescreen indicator gets permanently stuck on the long side of the phone even when holding it vertically. A reboot is usually needed to fix that.
Turns out rebooting also fixed the animations in Safari.
Another thing to remember with Safari is that low battery mode can affect animations and make them less smooth (and prevent muted autoplay videos from auto playing).
#-webkit-keyframes { <- let this symbol to the same line
} - >
This works on iphone 3 ios 6.1.6
with -webkit- prefix on transform and animation