We Keep Coding

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>

I want to make a word disappear after it performs a CSS animation during a mouseover

I am trying to get my code to play an animation (one word falling to the bottom of the page before disappearing), when a mouse hovers over a word in a class div, and after that have it disappear for good.
The CSS 'visibility property' allows me to choose whether the word is visible or not, but when dealing with 'class:hover' like I am, the word comes back when the mouse is not hovering over the word's position. Same with 'display: none';
When JavaScript (document.getElementById("myP").style.visibility = "hidden";) is applied with the help of onmouseover, the word will disappear without playing the CSS animation. Is there a way I can have the word perform the animation and then have it disappear from the page?
I can't show you my current code, as I'm using it in a final project soon. I'll provide an outline of it though:
<style>
.word:hover{
/*This makes the words fall to the bottom of the screen.*/
-webkit-animation-name: fallDown;
-webkit-animation-duration: 6s;
animation-name: fallDown;
animation-duration: 6s;
}
#1{
position: absolute;
left: 200px;
top: 200px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes fallDown {
0% {animation-timing-function: ease-in;}
100% {top:97%; display: none;}
}
/* Standard syntax */
#keyframes fallDown {
0% {animation-timing-function: ease-in;}
100% {top:97%; display: none;}
}
</style>
</head>
<body>
<div class="word" id="1"> Falling </div>
</body>
Please let me know if you have any ideas.

You need animationend - Event reference, it is fired when a CSS animation has completed.
$('.word').hover( function(){
$(this).addClass('animated').on('animationend webkitAnimationEnd', function(){
$(this).hide();
});
});
here is the css
.animated {
-webkit-animation: fallDown 6s;
animation: fallDown 6s;
}
DEMO (Use full page mode to see it)
$('.word').hover( function(){
$(this).addClass('animated').on('animationend webkitAnimationEnd', function(){
$(this).hide();
});
});
/* Chrome, Safari, Opera */
#-webkit-keyframes fallDown {
to {top:97%; display: none;}
}
/* Standard syntax */
#keyframes fallDown {
to {top:97%; display: none;}
}
.word{
position: absolute;
left: 200px;
top: 200px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated {
-webkit-animation: fallDown 6s;
animation: fallDown 6s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word"> Falling </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/

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.

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