I want to flip a coin with this 3 images, i want that each image could change when its rotating so user cant see the raw changing of each image.. i know that the solution could come with changing the percentages, but cant figure out
Conclusion: I want to "hide" when each coin changes.
This is the HTML and CSS
.coin {
height: 40px;
width: 40px;
animation: spin 18s ease infinite;
border-radius: 50%;
background-size: cover;
}
#keyframes spin {
0% {
-webkit-transform: rotateY(0deg);
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.33% {
-webkit-transform: rotateY(360deg);
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.34% {
-webkit-transform: rotateY(0deg);
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.66% {
-webkit-transform: rotateY(360deg);
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.67% {
-webkit-transform: rotateY(0deg);
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
100% {
-webkit-transform: rotateY(360deg);
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
}
<div class="coin"></div>
Consider 2 animations and it will be easier to handle. One for the rotation that will last Xs and the other for the image change that will last (3/2)*Xs with a delay of X/4s because you need to switch on the 90deg angle and 90deg=360deg/4
.coin {
height: 40px;
width: 40px;
animation:
spin 2s linear infinite,
change 3s infinite linear .5s;
border-radius: 50%;
background-size: cover;
}
#keyframes change {
0%,33.33% {
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.34%,66.66% {
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.67%,100% {
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
}
#keyframes spin {
100% {
transform: rotateY(360deg);
}
}
<div class="coin"></div>
With a variable for better control
.coin {
--x:4s;
height: 40px;
width: 40px;
animation:
spin var(--x) linear infinite,
change calc(3*var(--x)/2) infinite linear calc(var(--x)/4);
border-radius: 50%;
background-size: cover;
}
#keyframes change {
0%,33.33% {
background-image: url("https://i.ibb.co/w0M0NjP/3.png");
}
33.34%,66.66% {
background-image: url("https://i.ibb.co/n7k3p0X/2.png");
}
66.67%,100% {
background-image: url("https://i.ibb.co/gmzSqzG/1.png");
}
}
#keyframes spin {
100% {
transform: rotateY(360deg);
}
}
<div class="coin"></div>
Related
I am new to CSS animations so I made this little project in which there is a box bouncing and it looks pretty real. I want the text inside the box (at the beginning it is just a 0) to increment by one every time the box bounces/the animation is complete. I tried using a counter but it keeps on resetting.
Here is my code:
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter::before {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
content: counter(bounceCount);
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
counter-reset: bounceCount, calc(counter(bounceCount)+1)
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
counter-increment: bounceCount;
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
I am open to any suggestions including CSS, HTML, Jquery, JS, etc...
I would also appreciate it if someone could also explain why their code works... Many times I see answers on this website that have only code and no explaining. Please explain!
By it's definition, counter-increment is a non-animatable css property - that's why you're not being successful in using it in your animation. You would have to use a javascript function to count the bounces. As the animation duration is 2 seconds, one approach would be to use a set-interval approach and increment your counter every 2 seconds.
document.getElementById('counter').innerHTML = 0;
function increment() {
var x = document.getElementById('counter').innerHTML;
//if we declare the x value as 0, it will keep resetting,
//so instead, put we retrieve the initial value from the span
//and set the variable to that value
x++;
//increase by 1
document.getElementById('counter').innerHTML = x; //set span value
}
setInterval(increment, 2000); //1000ms in 1 sec
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
Hope this clears things up for you! :)
I am facing a problem with svg on my portfolio page.
I have created svg and I used animation to spin the svg in infinite loop. Problem occures when I reload my portfolio page multiple times. When I do, my screen starts to move towards the center of spinning. I am looking for fix, anyone knows what might help?
images:
after few reloads:
and here is my code:
html {
font-size: 62.5%;
background-color: var(--color-tertiary);
overflow-x: hidden; // My svg is really big and it overflows page, so I need to use this
}
/***************** HEADER **********************/
.header{
width: 100vw;
height: 100vh;
background-position: center;
background-size: cover;
position: relative;
&__logo{ // this is the svg
position: absolute;
top: 0;
left: 30rem;
width: 180rem;
z-index: -1; // I use z-index to make sure that moving svg is in the background of the page
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 500s 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);} }
}
&__wrapper{
z-index: 10;
}
}
What I see that this part:
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);} }
is inside of the class. All keyframes should be standalone. In the #keyframes line also remove -webkit- from transform.
Looking to build something like this - a spin the wheel - using only HTML and CSS, without Javascript
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel
Looking for some references or even to see if it can be done.
This is using the Hover effect of spinning. Since css doesn't have event handlers, you can't add/remove classes. However, you can add hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
Hover to see effect: <div>Spin</div>
If you could use a tiny bit of javascript, you could do something like this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>
Note:
The script here is purely toggling the class 'thisIsAdded'.
As Justinas pointed out We cant fire css style on click event. You need javascript for that. However you can use CSS animation to achieve the spin effect but only with pseudo-selectors.
below is a sample spin effect using only CSS
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Here you go.. Fiddle
CSS:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
#-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); } }
Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;
I started to make a responsive portfolio for myself and ran into some weird glitch like animations.
My first question is can you put keyframes inside of a media query? or do I need to make two animations and use the media query to switch from one to the other?
If you go to the portfolio => minimize the window to a mobile view => the size of my cloud/bird/waves animations stay as the desktop size and don't change unless you refresh the page.
#media only screen and (max-width: 680px) {
/* Clouds CSS3 animations */
#-webkit-keyframes Clouds-Size {
from {
width: 25%;
}
50% {
width: 30%;
}
to {
width: 25%;
}
}
#-moz-keyframes Clouds-Size {
from {
width: 25%;
}
50% {
width: 30%;
}
to {
width: 25%;
}
}
#-ms-keyframes Clouds-Size {
from {
width: 25%;
}
50% {
width: 30%;
}
to {
width: 25%;
}
}
/* End Clouds CSS3 Animation */
/* Big Wave CSS3 animations */
#-webkit-keyframes Wave-Big-Size {
from {
height: 10em;
}
50% {
height: 9em;
}
to {
height: 10em;
}
}
#-moz-keyframes Wave-Big-Size {
from {
height: 10em;
}
50% {
height: 9em;
}
to {
height: 10em;
}
}
#-ms-keyframes Wave-Big-Size {
from {
height: 10em;
}
50% {
height: 9em;
}
to {
height: 10em;
}
}
/* End Big Wave CSS3 Animation */
}
My second(main) question is an infinite CSS3 keyframe animation seems to glitch after a few seconds like it's having a hard refresh to the animation.
On my portfolio I have two waves that goes from left-right and the other one goes from right-left.
The bottom Big-Wave works like a charm and has a very smooth animation but the smaller top wave seems to do a minor glitch after a few seconds. This isn't life or death to me but is very odd and slightly annoying to me.
Here is the css for this section:
.bigWave {
background: url(../images/bigWave.svg) repeat-x;
height: 7em;
width: 100%;
position: absolute;
bottom: 0;
-webkit-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
-moz-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
-ms-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
-o-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
}
#media only screen and (max-width: 680px) {
.bigWave {
height: 10em;
}
}
.smallWave {
background: url(../images/smallWave.svg) repeat-x;
height: 6em;
width: 100%;
position: absolute;
bottom: 4em;
-webkit-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
-moz-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
-ms-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
-o-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
}
#media only screen and (max-width: 680px) {
.smallWave {
height: 12em;
}
}
Here is the keyframes for the wave animation:
/* Big Wave CSS3 animations */
#-webkit-keyframes Wave-Big {
from {
background-position: 5% 5%
}
to {
background-position: 1300% 0%
}
}
#-webkit-keyframes Wave-Big-Size {
from {
height: 7em;
}
50% {
height: 6em;
}
to {
height: 7em;
}
}
#-moz-keyframes Wave-Big {
from {
background-position: 5% 5%
}
to {
background-position: 1300% 0%
}
}
#-moz-keyframes Wave-Big-Size {
from {
height: 7em;
}
50% {
height: 6em;
}
to {
height: 7em;
}
}
#-ms-keyframes Wave-Big {
from {
background-position: 5% 5%
}
to {
background-position: 1300% 0%
}
}
#-ms-keyframes Wave-Big-Size {
from {
height: 7em;
}
50% {
height: 6em;
}
to {
height: 7em;
}
}
/* End Big Wave CSS3 Animation */
/* Small Wave CSS3 animations */
#-webkit-keyframes Wave-Small {
from {
background-position: 5% 5%
}
to {
background-position: -1300% 0%
}
}
#-webkit-keyframes Wave-Small-Size {
from {
bottom: 4em;
}
50% {
bottom: 3em;
}
to {
bottom: 4em;
}
}
#-moz-keyframes Wave-Small {
from {
background-position: 5% 5%
}
to {
background-position: -1300% 0%
}
}
#-moz-keyframes Wave-Small-Size {
from {
bottom: 4em;
}
50% {
bottom: 3em;
}
to {
bottom: 4em;
}
}
#-ms-keyframes Wave-Small {
from {
background-position: 5% 5%
}
to {
background-position: -1300% 0%
}
}
#-ms-keyframes Wave-Small-Size {
from {
bottom: 4em;
}
50% {
bottom: 3em;
}
to {
bottom: 4em;
}
}
/* End Small Wave CSS3 Animation */
Any ideas or suggestions that you would think may be the culprit?
Any and all help is GREATLY appreciated! This is also my first time with keyframes so tips are welcomed! :]
Portfolio
JSFIDDLE
transform: translate(); is hardware accelerated and should move smoother when animating. For example, the small wave using translateY instead of bottom is less choppy: http://jsfiddle.net/fE9t9/.
/* Small Wave CSS3 animations */
#-webkit-keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#-webkit-keyframes Wave-Small-Size {
from, to { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(1em); }
}
#-moz-keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#-moz-keyframes Wave-Small-Size {
from, to { -moz-transform: translateY(0); }
50% { -moz-transform: translateY(1em); }
}
#-o-keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#-o-keyframes Wave-Small-Size {
from, to { -o-transform: translateY(0); }
50% { -o-transform: translateY(1em); }
}
#keyframes Wave-Small {
from { background-position: 5% 5% }
to { background-position: -1300% 0% }
}
#keyframes Wave-Small-Size {
from, to { transform: translateY(0); }
50% { transform: translateY(1em) }
}
/* Big Wave CSS3 animations */
#-webkit-keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#-webkit-keyframes Wave-Big-Size {
from, to { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(1em); }
}
#-moz-keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#-moz-keyframes Wave-Big-Size {
from, to { -moz-transform: translateY(0); }
50% { -moz-transform: translateY(1em); }
}
#-o-keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#-o-keyframes Wave-Big-Size {
from, to { -o-transform: translateY(0); }
50% { -o-transform: translateY(1em); }
}
#keyframes Wave-Big {
from { background-position: 5% 5% }
to { background-position: 1300% 0% }
}
#keyframes Wave-Big-Size {
from, to { transform: translateY(0); }
50% { transform: translateY(1em); }
}
Note: animations are only supported IE10+; no version supports the -ms- prefix so it should be taken out.
translate animates slightly quicker; a slight discoordination would be visible if applied to only 1 wave. So translateY should be applied to both waves to make them synchronize. Depending on your preferences, it might be necessary to make some new adjustments to the timing/movement of the waves.
As for the first issue, you can put them where you want but it doesn't work like you hope. It does indeed change the animation itself, but that newly renovated animation is not applied to the elements. You need to use a little js to switch it over to the new one
One way that (should) fix the second problem is to make the animation duration x times larger and making the background position x times larger as well. Example here.
I'd recommend cleaning up your code formatting though, it would make following it easier and perhaps show a hidden issue you're not accounting for