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>

Multiple keyframes but doesn't seem to be running

I am doing a Vanilla JS and css practice and I am trying to run 2 keyframes in CSS on different elements but it doesn't seem to be working and I have no clue why.
Basically, when one clicks on the button, the classes 'applejuice; and 'pearjuice' are supposed to be added to the divs respectively and then the div with A will slide to the left and that with B will slide to the right. However, so far only the div with A is working, but not the B div.
Could anyone help me with this? Thank you in advance!!
**HTML:**
<body>
<button onClick="opena()">press</button>
<div class="pack">
<div class="left" class="apple">A</div>
<div class ="right"class="pear" >B</div>
</div>
</body>
CSS:
.pack{
width:100%;
}
body{
margin-left:0;
margin-right:0;
}
.left{
background:red;
float:left;
width:50vw;
margin-left:0;
margin-right:0;
}
.right{
background:blue;
width:50vw;
padding-left:0;
margin-left:0;
margiin-right:0;
float:right;
}
.applejuice{
animation-name:gorda;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes gorda{
0%{width:50vw;}
100%{width:0vw;left: 50vw;}}
}
.pearjuice{
animation-name:gordi;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode:forwards;
}
#keyframes gordi{
0%{width:50vw;}
100%{width:0vw;right:0vw;}
}
JS:
function opena() {
var eleme = document.getElementsByClassName("left")[0];
var elemo = document.getElementsByClassName("right")[0];
eleme.classList.add("applejuice");
elemo.classList.add("pearjuice");
}

you put one extra } in gorda
#keyframes gorda{
0%{width:50vw;}
100%{width:0vw;left: 50vw;}
}
function opena() {
var eleme = document.getElementsByClassName("left")[0];
var elemo = document.getElementsByClassName("right")[0];
eleme.classList.add("applejuice");
elemo.classList.add("pearjuice");
}
.pack{
width:100%;
}
body{
margin-left:0;
margin-right:0;
}
.left{
background:red;
float:left;
width:50vw;
margin-left:0;
margin-right:0;
}
.right{
background:blue;
width:50vw;
padding-left:0;
margin-left:0;
margin-right:0;
float:right;
}
.applejuice{
animation-name:gorda;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes gorda{
0%{width:50vw;}
100%{width:0vw;left: 50vw;}
}
.pearjuice{
animation-name:gordi;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode:forwards;
}
#keyframes gordi{
0%{width:50vw;}
100%{width:0vw;right:0vw;}
}
<button onClick="opena()">press</button>
<div class="pack">
<div class="left" class="apple">A</div>
<div class ="right"class="pear" >B</div>
</div>

How to get keyframes animation to stop on last animation

I'm looking to stop my animation on my 100% keyframe.
Here it is, jQuery is shown at bottom. What I'm trying to figure out completely is how to animate these boxes so that if you click on whichever one is on the top, it moves to the bottom, and then the bottom one moves to the top. Any ideas?
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#keyframes active {
0% {
transform: translateX(0px);
}
33% {
transform: translateX(105px);
}
66% {
transform: rotateY(180deg) translateY(210px);
}
100% {
transform: rotateY(0deg) translateY(210px);
}
}
.all-wrap {border: 1px solid black;
}
.container {width:100px;height:100px;background-color:red;
perspective:400px;perspective-origin:50% 100px;
margin-right:auto;
display: block;
border: 2px solid purple;
animation-fill-mode: forwards;
background-repeat: no-repeat;
}
.containerActive {
animation: active 3s ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transform-style: preserve-3d;
animation-direction: normal;
}
</style>
</head>
<body>
<div class="all-wrap">
<div class="container">
</div>
<div class="container">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/rotate.js"></script>
</body>
</html>
/* Here is the jQuery: */
$('[class*="container"]').on('click', function(){
$(this).toggleClass('containerActive');
});

Stopping on the 100% keyframe should be fulfilled with this code:
animation-fill-mode: forwards;
This has been previously addressed here:
Stopping a CSS3 Animation on last frame

I've solved it. Everything was perfect besides my key frames. Since I had it rotating 180 degrees at first, that means that it is going to rotate another 180 degrees at 100% to get back to it's original orientation. I can't declare it at 100% because I need 100% to have the correct translation. So I came up with a clever idea, how about making the rotation degrees half of what I want it to be? This would give it the appearance of a full turn.
Key frames:
#keyframes active {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, 105px);}
75% {transform: rotateY(90deg) translate(-105px, 105px);}
100% {transform: translate(0px, 105px);}
}
#keyframes active2 {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, -105px);}
75% {transform: rotateY(90deg) translate(-105px, -105px);}
100% {transform: translate(0px, -105px);}
}

Make html inputs flow

i am trying to move button Like this demo .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.
HTML
<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>
CSS
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;}
}
Here's demo

Here is a logic very simple one
What it basically does is it interchanges the classes periodically so that buttons navigation path changes so as to give view of dynamic path
function timer() {
console.log("timer!");
var className1 = $('#oneId').attr('class');
var className2 = $('#twoId').attr('class');
var className3 = $('#threeId').attr('class');
$( "#oneId" ).removeClass(className1);
$( "#twoId" ).removeClass(className2 );
$( "#threeId" ).removeClass(className3);
$( "#oneId" ).addClass(className2);
$( "#twoId" ).addClass(className3);
$( "#threeId" ).addClass( className1);
// alert("class changed"+className1+":"+$('#oneId').attr('class')+","+className2+$('#twoId').attr('class')+","+className3+":"+$('#threeId').attr('class'));
}
window.setInterval(timer, 10000);
Logic to make it more like the demo you have provided
Create a number of paths that means you have to create more than 3 or 4 set of class one,two,three variants
Periodically each path so that corresponding function for each path triggers and path changes accordingly period .The set period have to change when box exits square box's border so a 2000 or so milliseconds
Give different starting and ending points for top and left of #-webkit-keyframes
so as each path looks unique
Give values that are out of the range of box so that it gives the effect of entering through one side and leaving through other