We Keep Coding

Smooth Scroll CSS Property

I have the following code. Even though I have added scroll-behavior: smooth; to .containerScroll, why does it not scroll smoothly to the next section? How can I make it so it scrolls smoothly to the next section? Right now, its not scrolling smoothly to the next section even though I made use of the property. How can I fix this?
.containerScroll {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth;
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
<a href="#about">
<div class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
</a>
<div id="" class="long-container">
long old container
</div>
<div id="about">
scroll to me
</div>

Add to root html tag:
html {
scroll-behavior: smooth;
}
The smooth scroll behavior should be added to the element that is being scrolled, not to the element that triggers the scroll.

CSS property scroll-behavior: smooth with html tag should wrap the #about div tag. And need CSS property overflow-y: scroll and height prop also.
Idk for some reason this site's code snippet shows error, So if you want to see my explanation in code, visit below codepen.
https://codepen.io/junzero741/pen/zYEWWEK

function scrollf() {//js function
let e = document.getElementById("about");//Your id to scroll
e.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'start'
});
}
.containerScroll {
/*--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth; //removed these unwanted lines,u may un comment*/
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
cursor: pointer; /*added this for cursor click-like effect*/
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
cursor: pointer; /*added this for cursor click-like effect*/
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
<div class="containerScroll" onclick="scrollf()"><!--use div with js-->
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
<div id="" class="long-container">
long old container
</div>
<div id="about">
scroll to me
</div>
ReadMe: Nowadays we are not understand what the anchor a tag does,even though it opens a div in the same page
what it actually does is reload the page and show the div.//yes this is false it may not reload the page ,its only my opinion
so in the above code we us pure js to scroll ,
we call this function when containerScroll is clicked,
since its js we dont get a pointable-mouse when we hover over those arrows, so we use cursor: pointer; in css for first-scroll&second-scroll.
This one below is another approach that I got from https://stackoverflow.com/a/70553396/14862885
It preserves your animation, fixed glitches & bugs but still not recommended, unless You need to avoid js
.containerScroll {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
scroll-behavior: smooth;
}
.first-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
position: sticky; /*makes scroll arrow to stick to container*/
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - -2em) !important;
width: 1.5em;
height: 1.5em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: sticky;/*makes scroll arrow to stick to container*/
border-width: 0 0.18em 0.18em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.4;
}
}
#media (min-width:320px) and (max-width:480px) {
.containerScroll {
display: none;
}
}
.long-container {
height: 600px;
background: yellow;
}
#about {
height: 600px;
background: green;
}
.smooth-container {
width: 100%;
height: 600px;
overflow: scroll;
scroll-behavior: smooth;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box;
}
.parent {
width: 100%;
height: 600px;
overflow: hidden;
}
<!-- div tag with class `smooth-container` is wrapping the `long-container` and `about`. and with CSS, `overflow-y: scroll` and `height` value. -->
<div class="parent">
<div class="smooth-container">
<div id="" class="long-container">
long old container
<a href="#about"><!-- added anchor tag inside long-container-->
<div class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</div>
</a>
</div>
<div id="about">
scroll to me
</div>
</div>
</div>

Customized HTML checkbox label

I have a customized check box which is grabbed from Codepen.
When the page loads the checkbox is almost checked and no text is available in the box.
.
When the user unchecks the checkbox it shows the value of its label:
.
What I want to do is to show a custom message to be displayed in the checkbox like 'Click me to confirm the contact'. When the user unchecks the checkbox it works fine showing that contacted.
I have tried with jQuery and it is not working. Could anyone give me a working solution? I expect something like this:
Thanks.
.inputGroup {
background-color: #fff;
border-radius: 25px;
}
.inputGroup label {
padding: 12px 30px;
width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup input:checked~label {
color: #fff;
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01">Contacted</label>
</div>

I don't really understand why you want your checkbox to be always checked ( as i see in your HTML ) but here's a solution to change the text on the label. Using :after pseudo-element.
If this is not what you are looking for. Please let me know in the comments.
.inputGroup {
background-color: #fff;
border-radius: 25px;
position:relative;
}
.inputGroup label {
padding: 12px 30px;
width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
box-sizing:border-box;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup label:after {
content:"Contacted";
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:2;
left: 15px;
}
.inputGroup input:checked~label:after {
content:"Click me to confirm";
}
.inputGroup input:checked~label {
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01"></label>
</div>

Here's a solution using JavaScript to swap out the label values. One of the issues I ran into with this was that you had a text color of white on the label which I've had to remove to display the label.
input = document.getElementById('radio1');
label = document.getElementById('radio01');
function handleClick() {
(input.checked ? label.innerText = "Click me to confirm the contact" : label.innerText = "Contacted");
}
input.addEventListener('click', handleClick);
.inputGroup {
background-color: #fff;
border-radius: 25px;
}
#para {
z-index: 999;
}
.inputGroup label {
padding: 12px 30px;
max-width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup input:checked~label {
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 0;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01">Click me to confirm the contact</label>
</div>

Can (endless) CSS keyframe animations be stopped at certain time point or a defined keyframe?

I am trying to find out if CSS today offers enough tools to have animations run until an event tells them to stop?
Yes this is possible see snippet, however:
This animation will jump to the end if stopped in between. I was wondering if it can be stopped at any certain point of the computed keyframes. So basically like a wheel of fortune keep spinning the DIV until it's stopped and when stopped while upside down remain upside down until maybe restarted?
snippet:
#wrap {
background-color: yellow;
position: relative;
top: 0px;
width: 100px;
height: 100px;
border-radius: 50px;
box-sizing: border-box;
transition: 700ms linear;
animation-iteration-count: infinite;
}
#wrap:hover {
background-color: orange;
}
#mouth {
background-color: transparent;
position: absolute;
border-left: 4px solid black;
border-right: 4px solid black;
border-bottom: 4px solid black;
border-radius: 0 0 60px 60px;
height: 30px;
width: 60px;
top: 52px;
left: 20px;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
padding: 0;
}
#left-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
left: 30px;
top: 25px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#right-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
top: 25px;
right: 30px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#keyframes rotateDiv {
from {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari */
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
}
}
#wrap {
animation-duration: 1200ms;
animation-name: rotateDiv;
animation-iteration-count: 0;
animation-timing-function: linear;
}
<div id='wrap'>
<div id='left-eye'>
</div>
<div id='right-eye'>
</div>
<div id='mouth'>
</div>
</div>
<input type='button' value='start' onClick="document.getElementById('wrap').style.animationIterationCount = 'infinite';">
<input type='button' value='stop' onClick="document.getElementById('wrap').style.animationIterationCount = '0';">

You can pause and resume CSS animations using animation-play-state and toggling a class:
CSS:
.paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
Snippet:
function pause() {
wrap.classList.add("paused");
}
function play() {
wrap.classList.remove("paused");
}
.paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#wrap {
background-color: yellow;
position: relative;
top: 0px;
width: 100px;
height: 100px;
border-radius: 50px;
box-sizing: border-box;
transition: 700ms linear;
animation-iteration-count: infinite;
}
#wrap:hover {
background-color: orange;
}
#mouth {
background-color: transparent;
position: absolute;
border-left: 4px solid black;
border-right: 4px solid black;
border-bottom: 4px solid black;
border-radius: 0 0 60px 60px;
height: 30px;
width: 60px;
top: 52px;
left: 20px;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
padding: 0;
}
#left-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
left: 30px;
top: 25px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#right-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
top: 25px;
right: 30px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#wrap {
animation-duration: 1200ms;
animation-name: rotateDiv;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes rotateDiv {
from {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari */
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
}
}
<div id = "wrap" class = "paused">
<div id = "left-eye"> </div>
<div id = "right-eye"> </div>
<div id = "mouth"> </div>
</div>
<input type = "button" value = "start" onClick = "play()">
<input type = "button" value = "stop" onClick = "pause()">

You may want to consider adjusting the animation play state rather than the iteration count. This will allow you to stop the animation at your desired point, but not reset it to the beginning.
function play() {
let target = document.getElementById('wrap')
target.style.animationPlayState = 'running'
let styles = getComputedStyle(target)
console.log(styles.getPropertyValue('animation-play-state'))
}
function pause() {
let target = document.getElementById('wrap')
target.style.animationPlayState = 'paused'
let styles = getComputedStyle(target)
console.log(styles.getPropertyValue('animation-play-state'))
}
#wrap {
background-color: yellow;
position: relative;
top: 0px;
width: 100px;
height: 100px;
border-radius: 50px;
box-sizing: border-box;
transition: 700ms linear;
animation-iteration-count: infinite;
}
#wrap:hover {
background-color: orange;
}
#mouth {
background-color: transparent;
position: absolute;
border-left: 4px solid black;
border-right: 4px solid black;
border-bottom: 4px solid black;
border-radius: 0 0 60px 60px;
height: 30px;
width: 60px;
top: 52px;
left: 20px;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
padding: 0;
}
#left-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
left: 30px;
top: 25px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#right-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
top: 25px;
right: 30px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#wrap {
animation-duration: 1200ms;
animation-name: rotateDiv;
animation-iteration-count: 0;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: paused;
}
#keyframes rotateDiv {
from {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari */
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
}
}
<div id='wrap'>
<div id='left-eye'>
</div>
<div id='right-eye'>
</div>
<div id='mouth'>
</div>
</div>
<input type='button' value='start' onClick="play()">
<input type='button' value='stop' onClick="pause()">
Edit:
If you want to access information regarding a component's computed styles, you can use the getComputedStyle function. This will provide information within Javascript about all of an element's computed styles. The returned value from getComputedStyle can be used with the getPropertyValue function to provide information regarding a specific property.

This was very useful so far, yet the remaining question related to these answers:
I added window.getComputedStyle(wrap, null).getPropertyValue("transform") and write it to an output field. This returns the matrix state of the animation. How should the matrix be interpreted to know at what rotation degree or what keyframe it was paused? I found 4 float values in the matrix. Some values seem to be always the same as, or the negative value of one other value. So I guess I can calculate back to milliseconds with these values?
Or maybe there is a different property to read from with getComputedStyle() that makes this a bit simpler?
I have moved the snipped to a new more detailed question at: How can an animation keyframe or time offset be calculated from a CSS transform matrix?

CSS How to animate angled lines with skew transitions

I'm looking to incorporate a line that's being drawn that separates into 2 more spreading upwards and downwards by 45 degrees. This is CODEPEN.
CSS:
.connector {
height: 40px;
width: 200px;
border-bottom: 2px solid red;
border-right: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}

This would work:
.connector {
position: relative;
margin: 100px;
width: 100px;
height: 2px;
background: #f00;
}
.connector:before,
.connector:after {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 100px;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.connector:after {
transform: rotate(45deg);
}
<div class="connector"></div>
Here is an animated version:
.connector {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
animation: draw 1s linear;
animation-fill-mode: forwards;
}
.up,
.down {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 1s linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.down {
transform: rotate(45deg);
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div class="connector">
<div class="up"></div>
<div class="down"></div>
</div>

I don't know if I understood what you want. But, what about this?
https://codepen.io/pablodarde/pen/qPexVX
html
<div class="connector up"></div>
<div class="connector down"></div>
css
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
Here, my animated version...
HTML
<div class="container">
<div class="connector up"></div>
<div class="connector down"></div>
</div>
CSS
.container {
width: 0;
height: 80px;
overflow: hidden;
transition: all 2s ease;
}
.animate {
width: 220px;
}
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
box-sizing: border-box;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
JavaScript
document.querySelector('.container').classList.add('animate');
setTimeout(function() {
document.querySelector('.container').classList.add('animate');
}, 500);
.container {
width: 0;
height: 80px;
overflow: hidden;
transition: all 2s ease;
}
.animate {
width: 220px;
}
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
box-sizing: border-box;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
<div class="container">
<div class="connector up"></div>
<div class="connector down"></div>
</div>

how to make a search bar responsive using jquery or css3

function searchToggle(obj, evt) {
var container = $(obj).closest('.search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('.search-input').val('');
}
}
.search-wrapper {
position: absolute;
left: 79%;
top: -25px;
transform: translate(-50%, 50%);
}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: black;
border-radius: 16px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 400px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0 70px 0 20px;
position: absolute;
top: 0;
left: 0;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
opacity: 0;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #fff;
padding: 0;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
background: #FE5F55;
border-radius: 2px;
left: 9px;
top: 18px;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
border: 4px solid #FE5F55;
border-radius: 50%;
left: 0;
top: 0;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="search-wrapper">
<div class="input-holder">
<input type="text" class="search-input" placeholder="Type to search" />
<button class="search-icon" onclick="searchToggle(this, event);"><span></span>
</button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>
After a lot of research, changes I finally managed to make and position my search bar. But according to me it is not performing the search function. for example, if I type anything in it like 'home' and press the search icon nothing happens. So I want to ask whether I am wrong i.e. the search function is working and secondly I want to make it responsive like Google's search bar. I mean I want it to remember searches and also shorten the results as I type.
Any help would be highly appreciated. Thanks :)

I highly recommend you to use Bootstrap. It only uses CSS and is leightweight. You can find it well documented at Bootstrap Forms and W3S. If you don't want to use a Framework you can try building something for yourself. For that purpose you can simply look again at bootstrap (or another CSS Framework) and copy whatever you want to use.
Again, you should use a CSS Framework for responsive designs, they help alot and make your life easier.
Regards, Megajin