I'm trying to make this star spin around it's centre. For now it spins around some other point.
#question {
font-size: 3em;
animation: 1s linear 0s normal none infinite spin;
display: block;
width: 0;
}
#keyframes spin {
from { transform: rotate(00deg); }
to { transform: rotate(360deg); }
}
<div id="testWrapper"><span id="question">☆</span></div>
How can I fix it so the star spins around its centre?
The default transform-origin is 50% 50% which is what you want.
But you set the width to 0, and so it rotates around 0 in the horizontal direction.
You need to make your element be as large as the contents and also make the contents centered inside it.
In your example just setting the element to inline-block and removing the width:0 will almost fix it.
Related
I want elements to appear one by one on the page with an animation. I created the animation but I don’t know how to hide (not display: none) the element while delay function is in use.
So, after 1 second, element appears with appear animation, however there must be something else to hide it before animation starts.
.insta {
animation: appear 0.4s linear 1s;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class=«insta»>Instagram</p>
Set opacity: 0. That hides your text. Using animation-fill-mode: forwards will let you have the properties added at the end of the animation.
You can solve it by adding an animation-fill-mode: both; to your CSS. That means that the browser will apply the animation's first frame until it starts, and its last frame after it has finished.
Since your animation starts with opacity: 0; and ends with opacity: 1;, no further modifications required.
You can also combine it into the animation property (just add a both keyword somewhere):
.insta {
animation: appear 0.4s linear 1s both;
}
#keyframes appear {
0% {
opacity: 0;
transform: translateX(30%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
<p class="insta">Instagram</p>
Try on CodePen (at least until the Stack Snippets server is down...)
I have an image then I have applied the following style rules to:
.spinner {
position: absolute;
width: 600px;
height: 600px;
-webkit-transform-origin: 50% 50%;
-webkit-animation:spin 14s linear infinite;
animation:spin 14s linear infinite;
}
#-webkit-keyframes spin { 100% {-webkit-transform: rotate(-360deg);} }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}}
In my IDE, this works perfectly fine. I then published a page to the web about 6 months ago. I loaded the page, and it worked as expected. Actually things were good, no problems or anything for all those 6 months. Then a few weeks ago I noticed a strange development -- the rotation behavior changed. I was bewildered because this page, and indeed, the entire site is static. There have been no updates to the master css file or anything for that matter that could possibly interfere with the style rules that I posted above.
Specifically what changed was instead of the image rotating in place at its center, the image now rotates about its original center position. The easiest way to imagine the change in behavior is comparing it to a clock. The center of the clock doesn't move as the hands rotate. However the minute hand and hour hands do (namely the ends of the hands that point to the time). That is what my image is doing now. It's now moving across the x and y dimensions in pixel space when it is not supposed to. It's supposed to rotate in place, staying still. There should be no movement in x or y.
I said to myself, "well this is just impossible," and thought the problem would go away by itself just as mysteriously as it came. Unfortunately it persisted for a few weeks, so I feel compelled to deal with it. Despite the absence of style rule clashes, I added !important to all the style rules that I posted above for the .spinner class as well as the #keyframes out of scope as well. This didn't help.
Now I'm starting to think it could be a browser issue? I'm using google chrome; only google chrome, I didn't include any -moz, I won't need to. My only guess is that the browser updated itself and started handling these animations differently?
Question: Why would animation:spin change spinning behavior? Is this symptomatic of some other looming issue? Is there anything I can do to make my rules more robust, other than add !important?
Chrome version: 64.0.3282.186
Update After what seemed like a billion trial and errors, I found that by setting:
.spinner {
-webkit-transform-origin: 15% 0%;
}
The image started to spin in place like it used to. Still begs the question what happened...
I examined the image to see if it's dimensions had changed somehow, but things look normal.
A bit late at 2021.5 But may be helpful for somebody. In my case it was because I removed :
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
and then caught that. All the followings were untouched ,the css were:
#overlay {
display: none;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
z-index: 99999;
}
.myblock {
display: inline-block;
vertical-align: center;
horiz-align: center;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
transform-origin: center center;
-moz-transform-origin: center;
width: auto;
height: auto;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
html:
<body>
<div id="overlay">
<div class="myblock" style="background-color: transparent; background-blend-mode: unset">
<img src="/images/corona.png" width="150px" height="150px" style="background-blend-mode: unset"
alt="this slowpoke moves"/>
</div>
</div>
....//other divs
</div>
</body>
the js part:
function spinIt(gironPrm) {
if (gironPrm === true)
$("#overlay").css('display', 'flex')
else
$("#overlay").css('display', 'none')
}
I have no idea no care of its science and no time to figure out why it happened to me,
but its so as it is
I was looking at the webpage http://www.cuttherope.net on the current Google Chrome 38.0.x and saw that there are 4 icons in the middle of the page. When the mouse is over it, it has an icon squeezing effect: as if the icon is a pudding or jello squeezed on the side by a hand, and then bounce back to its natural size again.
I wonder how it is done: is it by HTML5 / CSS3, or how else is it done. I saw this div
<div class="game-icon resize"></div>
and if I use the developer tool to set display: none on it, then the icon will go away and have nothing showing, so this should be the div showing the effect, but if I examine the computed values, I do see an icon as a background, but all the computed values do not change when the mouse is over it or out of it. How is this done and is it part of HTML5 / CSS3's new features?
(if I disable JavaScript and reload the page, the effect still works, so apparently it is not done by JavaScript).
Yes, this is part of the CSS3 features (mainly transform )
If you want to have a similar effect without having to manually code it, have a look at this :
http://daneden.github.io/animate.css/
You can easily animate an element simply by adding two classes to it.
Found it! Yes, it's CSS3, and specifically the [-webkit-]animation: resize 0.2s linear; property. Disable that one and the effect stops.
I would guess it goes something like this:
img:hover {
-webkit-animation: squeeze 0.5s;
animation: squeeze 0.5s;
}
#-webkit-keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
#keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
<img src="http://placehold.it/100x100">
The CSS the other answers have pointed out
.resize:hover {
-webkit-animation: resize 0.2s linear;
animation: resize 0.2s linear;
}
References the following keyframe animation which is elsewhere in the CSS
#-webkit-keyframes resize {
0% { -webkit-transform:scale(1, 1) }
50% { -webkit-transform:scale(1.1, 0.9) }
100% { -webkit-transform:scale(1, 1) }
}
#keyframes resize {
0% { transform:scale(1, 1) }
50% { transform:scale(1.1, 0.9) }
100% { transform:scale(1, 1) }
}
The name resize is what links the two - it's not a keyword - you could call it boing and use
animation: boing 0.2s linear;
...
#keyframes boing {
Etc.
The keyframes say
at the beginning, scale to 100% x 100%
50% through the animation, scale to 110% x 90%
at the end, scale back to 100% x 100%
And the 0.2s in the animation property tells it to take 0.2 seconds to do the entire animation. The animation starts as soon as the style is applied, in this case when you hover.
I'm trying to make an infinite horizontal slider with 3 rows of images.
It looks like this:
But as you see when the end of the rows of images arrive, there's a huge blank space while the image finally appears again.
You can test it live here: http://jsfiddle.net/tbergeron/q596y/6/
Here's the CSS behind it:
ul.lists {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
-webkit-animation: moveSlideshow 180s linear infinite;
-moz-animation: moveSlideshow 180s linear infinite;
}
ul.lists li {
list-style: none;
display: inline-block;
}
ul.lists li img {
display: inline-block;
width: 100px;
height: 100px;
}
ul.slider2 {
top: 140px;
}
ul.slider3 {
top: 280px;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-300%);
}
}
#-moz-keyframes moveSlideshow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-300%);
}
}
What I'd like to happen is to never see that blank space, I would like it to roll on forever. Anyone has an idea on how to achieve this behavior?
Thanks and have a nice day.
basicly , You need to clone your elements.
At least many enough of the first ones to fill the entire width of the screen, or split into two differents tags, your elements.
So once a part of them, is gone left, you move them back to the right end to fill that empty space to keep scrolling without any gaps.
Your case requires javascript.
So many images wrapping line by line needs to clone the whole ul.
A good compromise could be to split content within two ul, so one can to next once of screen.
To duplicate the whole ul in the HTML document might not be a good idea and i would not advise to do so for text.
jQuery DEMO of your fiddle.
$(".lists.slider1").clone().appendTo("body");
$(".lists.slider2").clone().appendTo("body");
$(".lists.slider3").clone().appendTo("body");
But for small "marquee like" , you can use pseudo elements to clone the first few images.
For text of a known length(em) or known container's width , you may use text-shadow.
Pseudo and text-shadow avoid duplication of content.
Some horrible CSS example that demonstrate the cloning idea: http://dabblet.com/gist/5656795
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.