I am try to create a spinning image horizontally using purely CSS3.
This is a link to my page
http://www.csupomona.edu/~lannguyen/ISSM_WEB/html/
This is the css file:
www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css
the spin caller is at the top, and the implementation is at the bottom.
My issue is that the spinning that CSS3 provided is not full rotation. I would like some thing like this
http://davidwalsh.name/demo/css-cube.php (the depth cube example, but no need 3D).
can anyone help please.
thanks
Try This jsfiddle
<div class="cube">TRY</div>
CSS
.cube {
background-color: #5F9EA0;
border: 1px solid #CCCCCC;
height: 200px;
position: relative;
transform-style: preserve-3d;
-ms-transform-style:preserve-3d; /* IE 9 */
-webkit-transform-style:preserve-3d; /* Opera, Chrome, and Safari */
width: 200px;
}
#keyframes spin {
from { transform: rotateY(0);
-ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}
.cube {
animation: spin 5s infinite linear;
-webkit-animation:spin 5s infinite linear;
-ms-animation:spin 5s infinite linear;
}
#-webkit-keyframes spin {
from { transform: rotateY(0);
-ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}
Related
I have created animation for element in the page to slide in from the left, so it's starting point is
transform: translateX(-200%)
but when the page loads it has a scrollbar.
I'm using Chrome. it happens also in FF.
I'm also getting vertical scrollbar for
transform: translateY(200%)
I tried using
body, html{
overflow: hidden;
}
which seems to make the scrollbars disappear, but then the animation also doesn't work, I'm getting empty window until the animation ends.
The question is how can I use the animation with same parameters but without the scrollbar (horizontal and vertical).
more code:
.text {
transform: translateX(-200%);
-webkit-transform: translateX(-200%);
animation: slide-in-fleft 1s forwards;
-webkit-animation: slide-in-fleft 1s forwards;
animation-delay: 1s;
}
#keyframes slide-in-fleft {
100% { transform: translateX(0%); }
}
Try the following code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 2s;
transform: translateX(200%);
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
from {transform: translateX(-200%);}
to {transform: translateX(200%);}
}
/* Standard syntax */
#keyframes example {
from {transform: translateX(-200%);}
to {transform: translateX(200%);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
When an animation is finished, it changes back to its original style
I've been trying to blink two colors, using the following CSS rules but the colors just ends up blending.
Here is the jsfiddle: http://jsfiddle.net/1kyba3rd/
Here are the CSS rules:
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
/* Chrome, Safari, Opera */
-webkit-animation-name: flash-colors;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: steps(2, start);
-webkit-animation-iteration-count: infinite;
/* Standard Syntax */
animation-name: flash-colors;
animation-duration: 1s;
animation-timing-function: steps(2, start);
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
/* Standard syntax */
#keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
</style>
the blinking is not working properly because you have set background-color:yellow at the end of the animation (100%) and the background-color:white at the beginning, set first one at 50% so that the animation works as expected - demo
I am trying to capture a specific moment in elements animation. Meaning - I want the animation to start and stop at point X (lets say start and stop on second 5 of 100s animation).
Here is my shot at it
JSFiddle
#-webkit-keyframes background {
from { background: yellow; }
100% {
background: blue;
}
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: -40s;
-webkit-animation-play-state: paused;
}
This seems to work great in Chrome and Firefox but doesnt seem to work in Safari and IE(no way, right?!)
Note: I left the prefix in on purpose to test it on Safari specifically.
Unlike in Chrome, it seems like the animation never starts in Safari and remains on the initial step.
Is this a known issue? Is there a workaround or another way to implement this?
UPDATE/CLARIFICATION
What i need is to be able to capture a specific FRAME of the animation. Open my fiddle in Chrome and play around animation-delay attribute in my fiddle (make sure it remains negative). What you will see is that you are able to catch 1 specific frame of the animation. Thats exactly what I need. My problem is that this doesnt work in Safari.
What about creating a keyframe animation of 5 seconds and make sure there is ' 100ms in percentage' where the frames are the same.
Since the animation scale for time is in percentages, we can calculate that 100ms/5000ms is equal to 2%/100%.
div {
background:#333;
padding:10px;
width:100px;
height:100px;
color:#fff;
animation-name: animateAndPause;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes animateAndPause {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
98% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
for the purpose of demonstration, the jsfiddle has a longer pause, 500ms.
https://jsfiddle.net/bfu9wvxt/5/
If you want your animation to stop and start at a specific point, you need more keyframes:
#-webkit-keyframes background {
0% { background: yellow; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
100% { background: blue; }
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: ease;
}
Replace the first /* When You Want */% with a percentage of the animation duration where you want it to stop.
Replace the second /* When You Want */% with a percentage of the animation duration where you want it to start again.
Replace both occurrences of /* A different color in-between yellow and blue! */ with the same color, a color between yellow and blue.
This should work in Safari: Fiddle
#-webkit-keyframes change {
0% { background-color: yellow; }
100% { background-color: blue; }
}
div {
-webkit-animation-name: change;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 5s;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: cubic-bezier(0.29, 0.3, 0.86, 0.99);
}
Playing with the cubic-bezier curve can replicate the animation of stopping then starting at 5s out of 100s but it'll be pretty hard to start and stop the animation without javascript.
Try this code:
Is compatible with all the browsers especially safari.
div {
width: 100%;
background-color: #fff;
position: relative;
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 5s;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
animation-delay: 5s;
-webkit-animation-iteration-count: 100;
/* Chrome, Safari, Opera */
animation-iteration-count: 100;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
/* Standard syntax */
#keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
<div>Color bar</div>
If you want it not 100 times, You can take it out and add 100s to
duration, because I'm not sure what you want
let me know if you have any question.
I have a div with a border-radius, which is rotated using keyframes.
Look at this Fiddle in firefox.
To replicate the problem: let the window size be less than the circle drawn on the page(both in height and width).
Now the problem is that the parent of the rotating div, i.e. body in this case, is resizing to a larger width at some points while the rotation is going on.
The same code in Chrome appears like the parent is resized to a greater width and height once and then it becomes stable.
My question is (even though I have rotated the circle within parent with radius = r): why does the parent width and height increases to greater than r while rotating the div?
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='circle'>
rotated
</div>
The problem:
This (odd) behavior is caused because , what you are rotating isn't really a circle, its actually a block(inline block), which has four corners, just a square.
When you define a border radius it is not changed to a circle, instead its borders become rounded, the element is still a square.
Now, before you rotate the div(circle), which actually is a square, its parent has a width & height equal its child(by default, since it is the only child of its parent in your case),
i.e say width=height= r.
now when you rotate the div, so you rotate a square, and thus when, the square comes diagonally horizontal( or vertical), it gets the maximum height & width.
i.e diagonal=√2r, thus, height = width= √2r i.e 1.41*r, this is surely 41% greater than the original radius of the circle.
Now, this is where the parent is increased in width and height.
The solution:
The solution is quite simple, wrap your circle with a parent, and let it hide the overflow. See this Fiddle
now this does not actually make the element itself circular, but will remove excessive, space outside the circle, which overflows the parent.
.parent {
width: 100%;
height: 100%;
overflow: hidden;
}
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='parent'>
<div class='circle'>
rotated
</div>
</div>
I have been asked to figure out why this animation works in chrome but not in firefox, I have little experience with css3 transitions, I prefer jQuery but I have been asked to get to the bottom of it so...
here is the css, I hope its obvious what the html would be, I'm sure the html is fine as it works in chrome so I'm sure its a syntax error or similar.
edit - please see http://jsfiddle.net/5Uq86/
/* the animation */
#keyframes sub-menu-anim { to {height: 65px;} }
#-moz-keyframes sub-menu-anim /* Firefox */ { to {height: 65px;} }
#-webkit-keyframes sub-menu-anim /* Safari and Chrome */ { to {height: 65px;} }
#-o-keyframes sub-menu-anim /* Opera */ { to {height: 65px;} }
/* products menu animation */
#keyframes sub-menu-anim-prod { to {height: 210px;} }
#-moz-keyframes sub-menu-anim-prod /* Firefox */ { to {height: 210px;} }
#-webkit-keyframes sub-menu-anim-prod /* Safari and Chrome */ { to {height: 210px;} }
#-o-keyframes sub-menu-anim-prod /* Opera */ { to {height: 210px;} }
/* health menu animation */
#keyframes sub-menu-anim-health { to {height: 294px;} }
#-moz-keyframes sub-menu-anim-health /* Firefox */ { to {height: 294px;} }
#-webkit-keyframes sub-menu-anim-health /* Safari and Chrome */ { to {height: 294px;} }
#-o-keyframes sub-menu-anim-health /* Opera */ { to {height: 294px;} }
/* applying the animation to the menu */
#primaryNav li.menu-item ul.sub-menu {
animation:sub-menu-anim 0.5s;
-moz-animation: sub-menu-anim 0.5s; /* Firefox */
-webkit-animation: sub-menu-anim 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim 0.5s; /* Opera */
}
#primaryNav li.menu-item ul.sub-menu ul.sub-menu {
animation:none;
-moz-animation:none; /* Firefox */
-webkit-animation:none !important; /* Safari and Chrome */
-o-animation:none; /* Opera */
}
#primaryNav li#menu-item-17 ul.sub-menu {
animation:sub-menu-anim-prod 0.5s;
-moz-animation: sub-menu-anim-prod 0.5s; /* Firefox */
-webkit-animation: sub-menu-anim-prod 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim-prod 0.5s; /* Opera */
}
#primaryNav li#menu-item-229 ul.sub-menu {
animation:sub-menu-anim-health 0.5s;
-moz-animation: sub-menu-anim-health 0.5s; /* Firefox */
-webkit-animation: sub-menu-anim-health 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim-health 0.5s; /* Opera */
}
The problem seemed to be with where you were calling the animation. I changed your CSS selector to do it on the hover (so that the animation happens each time you hover) and made an adjustment to the -moz-animation property to include more values, to this:
#primaryNav li#menu-item-17:hover > ul.sub-menu {
animation:sub-menu-anim-prod 0.5s;
-moz-animation: 0.5s ease 0s normal none 1 sub-menu-anim-prod;
-webkit-animation: sub-menu-anim-prod 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim-prod 0.5s; /* Opera */
}
This seems to work. I have checked it in Firefox and Chrome. I also update other selectors to incorporate what I have done above. Please check this fiddle for the rest of the changes.