We Keep Coding

How can I rotate a conic gradient

Is there a way to make the bar on the conic gradient rotate infinitely in a circle? This is how the gradient looks, I just want it to rotate around the center but everything I have tried hasn't worked.

If I understand what you want, just make sure you have (at least) 3 colours, and the final colour is the same as the first
P.S. I added rotation because wasn't sure what you meant by infinite rotation
div {
position:relative;
height:200px;
overflow:hidden;
aspect-ratio: 1 / 1;
border: solid black 1px;
clip-path: border-box;
}
div::before {
z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
hsl(297.3, 84.6%, 20.4%),
hsl(192.6, 51.4%, 58.0%),
hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
#keyframes rot {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div>Hello World</div>

Apply animation to remove a text

I have implemented a nav tab-like view. Three buttons and when we click on one button the text corresponding to the other two buttons get hidden. But I want that when we update the text then we must be seeing some animation like fade in.
var prevId = 1;
function updateView(id) {
document.getElementById("subsec"+prevId).style.visibility = "hidden";
document.getElementById("subsec"+id).style.visibility = "visible";
prevId = id;
}
<div id="subsec1" >
Tab 1
</div>
<button onclick="updateView(1)"></button>
<div id="subsec2" style="visibility: hidden">
Tab 2
</div>
<button onclick="updateView(2)"></button>
<div id="subsec3" style="visibility: hidden">
Tab 3
</div>
<button onclick="updateView(3)"></button>
Can anyone help me with this. I have attached an example of how my view looks.
Example: I am currently on tab 3 and I click on tab 1 then tab 3 content should disappear but through animation and content of tab 1 must appear on-screen through animation only(like fade in).

Please read this from w3schools.com.
Try adding css like
.fadeIn {
animation-name: FadeIn;
animation-duration: 4s;
animation-fill-mode: both;
}
.fadeOut {
animation-name: FadeOut;
animation-duration: 4s;
animation-fill-mode: both;
}
#keyframes FadeIn {
from { opacity: 0%; }
to { opacity: 100%; }
}
#keyframes FadeOut {
from { opacity: 100%; }
to { opacity: 0%; }
}
and then adding javascript like so:
var prevId = 1;
function updateView(id) {
document.getElementById("subsec"+prevId).className = "fadeOut";
document.getElementById("subsec"+id).className = "fadeIn";
preId = id;
}
replace visibility: in html to opacity: 0%, and set the classes at the beginning if you want them to have animation at the beginning.
This is not optimalized.

I had a little play about to show how you might use a slightly simplified HTML markup and a modified button clickhandler function to trigger adding new styles (animations) to your tabs.
The CSS animations here are very basic examples but should serve to illustrate the effect of fading in.
const clickhandler=function(e){
document.querySelectorAll('button[data-tab]').forEach(bttn=>bttn.classList.remove('activebttn') );
document.querySelectorAll('div[data-tab]').forEach( div=>div.classList.remove('active','initial') );
document.querySelector('div[ data-tab="'+this.dataset.tab+'" ]').classList.add('active');
this.classList.add('activebttn');
}
document.querySelectorAll('button[data-tab]').forEach( bttn=>bttn.addEventListener('click',clickhandler) );
div[data-tab]{
background:white;
border:1px solid rgba(0,0,0,0.25);
border-radius:1rem 0 1rem 0;
box-shadow:0 0 1rem rgba(0,0,0,0.25);
margin:1rem auto;
width:600px;
min-height:400px;
padding:1rem;
opacity:0;
}
div[data-tab]:not(.active){
display:none;
}
#keyframes fadein{
0% { opacity:0; }
100% { opacity:1; background:whitesmoke; }
}
#keyframes fadeout{
0%{ opacity:100%;display:block; }
100%{ opacity:0%; background:white; display:none; }
}
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.active{
animation-name:fadein, shake;
animation-duration:1s, 1s;
animation-timing-function:ease-in-out;
animation-fill-mode: forwards;
animation-delay: 250ms,750ms;
}
.hide{
animation-name:fadeout;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode: forwards;
animation-delay: 250ms;
}
.initial{
display:block!important;
opacity:1!important;
}
button{
background:rgba(0,0,0,0.25);
border-radius:1rem;
border:1px solid transparent;
width:200px;
cursor:pointer;
padding:1rem;
transition:ease-in-out 250ms all;
}
button:hover{
border:1px solid gray;
background:rgba(255,255,255,0.25);
box-shadow:0 0 5px rgba(0,0,0,0.25);
}
button:active,
.activebttn{
border:1px solid gray;
background:rgba(0,255,0,0.25);
}
<button data-tab=1>Tab 1</button>
<button data-tab=2>Tab 2</button>
<button data-tab=3>Tab 3</button>
<div data-tab=1 class='initial'>
Code finance. Let's put a pin in that one-sheet we need to button up our approach optimize for search nor my supervisor didn't like the latest revision you gave me can you switch back to the first revision?.
</div>
<div data-tab=2>
We need to socialize the comms with the wider stakeholder community prairie dogging, roll back strategy drink the Kool-aid meeting assassin, but form without content style without meaning, yet can we jump on a zoom.
</div>
<div data-tab=3>
Cloud native container based knowledge process outsourcing blue sky. Tribal knowledge. I called the it department about that ransomware because of the old antivirus, but he said that we were using avast 2021 let's schedule a standup during the sprint to review our kpis.
</div>

jQuery Rotate CSS meter

I found some CSS that moves a needle like a VU meter. This mimics what I want to do. However it does a full animation from start to finish. Whereas I would like to make the change happen through a series of clicks. I'm trying to figure out how to do that and I am unsuccessful. I would like to know how I can make the needle move in the same way only through clicks
CSS
.gauge {
position:relative;
width:120px;
height:120px;
margin:10px;
display:inline-block;
}
.needle-assembly {
position:absolute;
top: 0%;
left:46%;
height:100%;
width:10%;
-webkit-transform: rotate(-45deg);
}
.needle-holder {
position:relative;
top:0;
left:0;
height:60%;
width:100%;
}
.needle {
position:absolute;
background-color:#A00;
height:100%;
width:20%;
left:40%;
}
#-webkit-keyframes moveNeedle
{
0% {-webkit-transform: rotate(-45deg);}
60% {-webkit-transform: rotate(55deg);}
65% {-webkit-transform: rotate(50deg);}
100% {-webkit-transform: rotate(65deg);}
}
#gauge {
-webkit-transform-origin:50% 50%;
-webkit-animation: moveNeedle 5s;
-webkit-animation-fill-mode: forwards;
}
HTML
<div class="gauge" style="height:140px; width:140px;">
<div class="needle-assembly" id="gauge">
<div class="needle-holder">
<div class="needle"></div>
</div>
</div>
</div>
jQuery
$('#gauge').click(function(){
$('#gauge').css({transform: 'rotate(45deg)'})
});
fiddle

It doesn't move when you click it because you are setting it to a static value.
You need to change the value somehow.
var deg=45;
$('#gauge').click(function(){
var t = 'rotate(' + deg +'deg)';
$('#gauge').css({transform: t})
deg = deg+5;
});
http://jsfiddle.net/4xc3wnux/6/

How To Move/Animate A DIV Background Image Smoothly Vertical?

I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...
<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur.com/zF1zrkC.jpg');
background-repeat:repeat-y;
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
}
</style>
<div id="moving_bg">
<h2>This is my DIV text that I want do not want to move/animate.</h2>
</div>
CODE 1:) http://jsfiddle.net/ZTsG9/1/ This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.
CODE 2:) http://jsfiddle.net/hY5Dx/3/ This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.
I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???

If you can get away with using 2 divs you can get it to work like this:
Working Example
html, body {
height: 100%;
margin: 0;
}
.outer {
height:100%;
overflow: hidden; /* hide the overflow so .inner looks like it fits in the window*/
}
.inner {
height:200%; /* the inner div will need to be twice as tall as the outer div */
width:100%;
-webkit-animation:mymove 5s linear infinite;
animation:mymove 5s linear infinite;
background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
background-size: 100% 50%; /* 50% height will be 100% of the window height*/
}
#-webkit-keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}

As per Muhammad's request i'll add my fiddle as an answer.
VanillaJS using requestAnimationFrame for that butter smooth slide :)
http://jsfiddle.net/hY5Dx/103/
Code to please SO:
var y = 0;
requestAnimationFrame(move);
var body = document.body;
function move(){
y++;
body.style.backgroundPosition = '0 ' + y + 'px';
requestAnimationFrame(move);
}

As there is too much comments after #Skynet answer, here I add the one I wrote following his base structure.
So in CSS, you can make use of animation CSS property
This property still is vendor-prefixes dependant.
Basically for what you want to do, you have to animate the background-position property, only on y axis.
Here is the CSS code
/* Following defines how the animation 'mymove' will run */
#keyframes mymove {
/* 0% is the beginning of animation */
0% {
background-position: 0 0;
}
/* This is the end… where we set it to the size of the background image for y axis (0 being the x axis) */
100% {
background-position: 0 860px;
}
}
/* same for webkit browsers */
#-webkit-keyframes mymove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 860px;
}
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
height: 366px;
text-align:center;
/* Here we assign our 'mymove' animation to the class .view, we ask it to last 3 seconds, linearly (no ease at start or end), and repeating infinitely */
animation: mymove 5s linear infinite;
/* again webkit browsers */
-webkit-animation:mymove 5s linear infinite;
background: url('http://i.imgur.com/zF1zrkC.jpg');
}
And here we are.
The other answers are ok but as mentionned, using multiple divs isn't always possible and the use of requestAnimationFrame() is also browser specific (Paul Irish has good polyfill for this).
Furthermore, I'm not sure incrementing a var infinitely is a good solution : it will block near 6100000px, and its much more code to change the speed or to take control over the animation.

<div class="view" style="background-image: url('http://i.imgur.com/zF1zrkC.jpg')">According to a new report from AnandTech.</div>
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
-webkit-animation:mymove 5s linear infinite;
/* Safari and Chrome */
animation:mymove 5s linear infinite;
background-size: 200% 100%;
background-repeat: repeat-y;
}
#keyframes mymove {
100% {
transform: translate3d(0px, -400px, 0px);
}
}
#-webkit-keyframes mymove
/* Safari and Chrome */
{
100% {
transform: translate3d(0px, -400px, 0px);
}
}
check jsfiddle

Animate the squares

i am trying to move button like this in the link http://www.gamesforthebrain.com/game/twincol/ but i cant move it. using css animation i can move in a straight forward animation. is it possible to move off the screen and come in the screen and a particlular movement and direction to a box like the link.here is what i have done.
<div id="box" style='width:200px;height:200px;border:1px solid black;'/>
<button id="one" type="button" >Button1</button>
<button id="two" type="button" >Button2</button>
<button id="three" type="button">Button3</button>
<style>
button{
-webkit-appearance:none;width:40px;height:40px;padding: 0;text-align: center;vertical-align: middle;border: 1px solid red;font-size:10px;font-weight:bold;
}
#one, #two, #three
{
position:relative;
}
#one
{
-webkit-animation:levelseven 16s infinite;
-webkit-animation-direction:alternate;
}
#two
{
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:levelseven_1 8s infinite;
}
#three
{
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:levelseven_2 10s infinite;
}
#-webkit-keyframes levelseven /* Safari and Chrome */
{
0% { left:0px; top:0px;}
25% { left:200px; top:0px;}
50% { left:100px; top:200px;}
75% { left:150px; top:50px;}
100% {background:cyan; left:0px; top:0px;}
}
#-webkit-keyframes levelseven_1 /* Safari and Chrome */
{
0% { left:0px; top:0px;}
50% {background:darkgoldenrod; left:0px; top:200px;}
100% { left:0px; top:0px;}
}
#-webkit-keyframes levelseven_2 /* Safari and Chrome */
{
0% { left:0px; top:0px;}
50% {left:200px; top:0px;}
100% {left:0px; top:0px;}
}
</style>
Fiddle

If you want to accomplish it by CSS3 animation.That will be really really complex,cause you've got to write many keyframes codes of every single button.
Demo
First, I let the big div's overflow:hidden.Just want to make an example by moving the first button.I add 50.1%，50.2% and 50.3% in keyframes.Maybe the thoughts can help you rewrite your HTML page.JS codes are recommended to realize this effect.

You can't use keyframe animations for this.
You have to use javascript. Look into using the modulo operator % to get the effect of infinite boundaries.
Also, to avoid too much complexity handling the divs, you should use canvas instead of divs.
So, go and learn JS, the Canvas API and what the % operator does - then you can solve your problem.