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); } }
Related
** why box not rotating but its translating the box . translateX is working but rotate is not working in animation **
<style>
.box{
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate{
0%{
transform: translateX(100px);
}
100%{
transform: rotate(360deg);
}
}
</style>
<div class="box">
</div>
You need to add both the transform properties in the keyframe, take a look at the snippet below
.box{
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate{
0%{
transform: translateX(100px) rotate(0deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}
<div class="box">
</div>
This is because it cannot rotate 360deg at the end of the animation.
Almost anything below 360deg will work. Please provide an illustration or video of the result you are trying to accomplish if this solution is not exactly what you want.
<style>
.box {
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate {
0% {
transform: translateX(100px);
}
100% {
transform: rotate(180deg);
}
}
</style>
<div class="box"></div>
However if you only want it to spin 360deg and not translateX, you can do it using:
<style>
.box {
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="box"></div>
In a moving box,
I want to make an animation that turns upside down when I raise the mouse.
I want to implement the movement of the box with the keyframe and designate hover, but it doesn't work.
What should I do?
#www{
background-color: black;
position: absolute;
left: 0;
top: 0;
animation: www 5s infinite;
transition: 1s;
}
#www:hover{
transform: rotate(180deg);
}
#keyframes www{
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {transform: translateX(0vw);}
}
<div class="box" id="www">WWW</div>
You can use a container to have both transformation properties as you can't achieve different transform on same element using different triggers(hover automatic)
Below styles used are for illustration only (to easily understand) you can use according to need and have a transparent background if want
function func() {
document.getElementById("www").style.transform = "rotate(180deg)"
}
#www {
background-color: black;
transition: 1s transform;
animation: www 10s infinite;
width: fit-content;
}
#keyframes www {
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {
transform: translateX(0vw);
}
}
.box1 {
transition: 1s;
background-color: red;
margin-top: 100px;
width: fit-content;
}
.box1:hover {
transform: rotate(180deg)
}
<div class="box" id="www" onclick="func()">
<div class="box1">WWW</div>
</div>
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>
I have a spinner that I am using for a long running operation but I cannot get it to spin. I have read the other SO questions related to this but none of them seem to get my scenario working.
I have the following HTML
<div class="ms-BasicSpinner">
<div class="ms-Spinner">
<div class="ms-Spinner-circle ms-Spinner--large"></div>
<div class="ms-Spinner-label">Creating...</div>
</div>
</div>
and CSS
.ms-Spinner > .ms-Spinner-circle.ms-Spinner--large {
width: 28px;
height: 28px;
}
.ms-Spinner > .ms-Spinner-circle {
margin: auto;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
border: 1.5px solid #c7e0f4;
border-top-color: #0078d7;
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}
.ms-Spinner > .ms-Spinner-label {
color: #0078d7;
margin-top: 10px;
text-align: center;
}
.ms-BasicSpinner .ms-Spinner {
display: inline-block;
margin: 10px 0;
}
I also have to following JSFiddle https://jsfiddle.net/20ufspze/
What am I missing to get the spinner to spin?
Any help much appreciated
Thanks in advance
You apply the cubic bezier function to a rotation to get the desired effect. Adapting the bottom element here you can rotate the blue part with:
#-webkit-keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
And by rewriting the cubic-bezier part as:
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
Best practice to animate any HTML component is use animation keyframes in CSS.
#keyframes anim {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
...
.ms-Spinner > .ms-Spinner-circle {
margin: auto;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
border: 1.5px solid #c7e0f4;
border-top-color: #0078d7;
animation: anim 1.3s infinite;
}
...
Fiddle Link : https://jsfiddle.net/8Ly697ne/
It seems that there is an issue with Chrome and Safari when there is an element with position:fixed contained in an element with position:relative and any element on the page has -webkit-transform. There is a rendering issue, which is a bit hard to explain but you can see it here: http://jsfiddle.net/ragulka/byGGH/1/
Code:
<div id="sticky-container">
<div id="sticky">
<div class="test"></div>
</div>
</div>
<div id="long">
<button class="pull-right">Change color</button>
<ol>
<li>1. Click change color. The color changes.</li>
<li>2. Scroll down so that the red box is just half-way over the gray area.</li>
<li>3. Click change color again. The color does not change.</li>
<li>4. Scroll down even more. The color changes while you scroll.</li>
</ol>
</div>
<i class="icon-spin">H</i>
<style type="text/css">
#sticky-container {
height: 50px;
position: relative;
z-index: 100;
}
#sticky {
background: red;
height: 50px;
width: 100px;
}
button {
margin-top: 100px;
}
#sticky.blue {
background: blue;
}
#long {
height: 1000px;
background: silver;
position: relative;
z-index: 0;
}
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
width: 10px;
height: 10px;
background: yellow;
position: absolute;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function() {
$('#sticky').affix(100);
$('button').on('click', function() {
$('#sticky').toggleClass('blue');
});
})
</script>
This works fine in Firefox. Haven't tested in IE.
Does anyone else have the same issue, is it a known bug or am I doing something wrong?