We Keep Coding

CSS/JS? How to reflect a border-radius?

I try to code a little rock-paper-scissors based game and used the CSS/JS-code from this youtube tutorial to create neon buttons with a snake animation around the edges of the button.
https://youtu.be/3RRgVHd2TXQ
I then softened the edges of the buttons using "border-radius: 15px" - but the reflection has still sharp corners.
How can I solve this?
Also the snake-animation to shine around the edges of the button does not work :( - would be great to know why!?
Try the game: https://bamory.com/?hotlink=FARTWAR (click link to start a game-session and invite another player with the session-code appearing on top of the screen)
CODE:
html{
text-align: center;
}
}
body.chapter2 {
color: yellow;
}
input {
margin: 10px;
height: 50px;
width: 90%;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050801;
flex-direction: column;
}
.button
{
border-radius: 15px;
position: relative;
display: inline-block;
padding: 10px 15px;
margin: 10px 10px;
color: #03e9f4;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
width: 25%;
}
.button:nth-child(1)
{
filter: hue-rotate(290deg);
}
.button:nth-child(3)
{
filter: hue-rotate(110deg);
}
.button:hover
{
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.button span
{
position: absolute;
display: block;
}
.button span:nth-child(1)
{
top: 0;
left: 0;
width: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
#keyframes animate1
{
0%
{
left: -100%;
}
50%, 100%
{
left: 100%;
}
}
.button span:nth-child(2)
{
top: -100px;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
#keyframes animate2
{
0%
{
top: -100%;
}
50%, 100%
{
top: 100%;
}
}
.button span:nth-child(3)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
#keyframes animate3
{
0%
{
right: -100%;
}
50%, 100%
{
right: 100%;
}
}
.button span:nth-child(4)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
#keyframes animate4
{
0%
{
bottom: -100%;
}
50%, 100%
{
bottom: 100%;
}
}
Thanks for your help! (it´s my first time using JS / stackoverflow - please forgive me if I inserted too much code or did other mistakes!)

how about give up box-reflect and use transform. take look at this:
css box-reflect alternative for older browser
it's more messy but why not more to learn

Center Position a CSS-Animation Playing With rotate(45deg)

I have the following code:
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 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.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
On my end, the output is looking like this:
This is exactly what I want since the scroll down button is aligned right on top of the text and I achieved this by setting left: calc(52.3% - 1em) !important;. On my end, this property is whats making it align perfectly on top of the text.
The problem is that when I zoom out, I'm getting this output:
As you can see, the scroll button alignment changes and its moved towards the right, and it is because of the left: calc(52.3% - 1em) !important; property I'm pretty sure. But I do not want to change or remove this property since this is whats making it align perfectly on 100% zoom. Is there a way to make this fixed? For example, when I zoom out on the website, the scroll button alignment does not change and remains constant? Any suggestions?

That's a really cool animation!
To perfectly center it, I made the following changes:
This was being used to center the div, left: calc(52.3% - 1em) !important;; I have removed this completely and have used a simple <center> tag to center it.
The animation code itself then runs directly right of center (which is off-center). You can fix this by moving an element to the left of itself by 50% of its own width with translateX(-50%).
Of course, you can't actually use 50%, because a square box, rotated on its side, increases its width by a factor of about 45%, which means we need to translateY not by 50%, but by 66%.
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
margin: auto;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg) translateX(-66%);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
}
<div id="containerScroll">
<center>
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</center>
</div>
<div style="border:1px solid black;">
<center>•<br>
This dot is perfectly centered.
</center>
</div>

Without a full snippit that allows one to fully recreate your issue, I can only attempt to recreate it using the code you have.
You could place the my-story and containerScroll elements within the section title together. Then make the containerScroll position absolute change the display to flex. Make its top position 0 and declare the width 100% and height 10em or what ever you wish its height to be, just make sure the my-story element has the same top margin set in its css as that of your height from the containerScroll.
I have tested this and when I ZOOM in or out using CNTL + MOUSE WHEEL there is no displacement of the two elements in reference to each other.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--top-dis: 10em; /* use variable so only change once in dynamic locations */
}
body {
height: 2000px;
}
section {
padding: 60px 0;
overflow: hidden;
}
#containerScroll {
position: absolute;
display: flex;
top: 0%;
background-color: #ddd;
width: 100%;
height: var(--top-dis);
}
.section-title {
text-align: center;
padding-bottom: 30px;
margin-top: var(--top-dis);
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
.first-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 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.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div class="section-title">
<h2>My Story</h2>
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
</div>

On the CSS just add this property to the #containerScroll
position:
fixed;
left: 50%;
top: 90%; transform: translate(-50%, -50%);

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

I have the following code in which the star is automatically "spinning" around the crescent and hovering it makes it "rotate". There is also a button on the left side: when it is hovered, it only changes its background-color and text-color; however, I want the star to start spinning and rotating when the button is hovered (and also want the effects of the button i.e. changing its background color and text color, to maintain simultaneously). I tried using different codes but everything I do results in messing the code up further.
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.moon:hover .counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg);
}
to {
-webkit-transform: rotateZ(0deg);
}
}
.moon:hover .counterrotate {
animation-name: inherit;
animation-duration: 5s;
transition-duration: 0.2s;
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<div class="moon">
<div class="rotate">
<div class="counterrotate">
<div class="star"></div>
</div>
</div>
</div>
<button>Hover</button>
</body>
</html>
How can I do that?

If I have understood the requirement correctly, you do not need Javascript for this.
However, CSS is not currently able to style a sibling element that is before a hovered element (it can't 'go back up' the DOM). But it can style a sibling element that follows the hovered element.
So the first change is to put the button element before the moon element. Now when the button element is hovered we can select its immediate sibling using the + combinator and from there we can select the rotate and moon elements to give them the animations required for rotating and spinning. (In this case we have left the definition of rotate as it is in the code in the question and introduced the spin animation to keep the star spinning around its center).
Now when the button is hovered the star rotates (moves in a large circle) and spins (rotates about its own center).
This snippet also makes the star spin when it is hovered and doesn't have any movement when there is no hovering. Obviously you can change the styling to have what you want there. Also the counterrotation is removed and the -webkit- prefixes, just to simplify things (and you don't want -webkit- with no vanilla setting set as well as some browsers may not interpret it).
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center;
/* Center the image */
background-repeat: no-repeat;
/* Do not repeat the image */
background-size: 120%;
/* Resize the background image to cover the entire container */
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
transform: rotate(0deg);
}
button:hover+.moon .star,
.star:hover {
animation: spin 5s infinite linear;
}
#keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button:hover+.moon .rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
}
#keyframes circle {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<button>Hover</button>
<div class="moon">
<div class="rotate">
<div class="star"></div>
</div>
</div>
</body>
</html>

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?

hide nav based on scroll removing adding classes

I found a nav layout I would like to use but I seem to have run into 2 problems.
problem #1 the transitions in the css do not seem to be transitioning smooth when scrolling up or down.
problem #2 if the scroll position is not zero I do not want mainnav to shrink and i want the top nav to show or hide when i scroll up or down.. thats hard to word so what I am trying to accomplish exactly is the following
https://www.battlefield.com/games/battlefield-4/classes
now when you scroll down it hides the top nav but if you scroll just a little each way it will show or hide thats what I am trying to do.. but I dont want the 2nd nav to scale down unless the top is 0
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition-duration: .4s;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: transform .3s, width .3s;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: transform .3s, width .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>

Demo
http://jsfiddle.net/gos4hwp9/52/
Explanation
Added transition: all ease-in-out .4s for smooth transitions of all properties
If scrollTop > 0 added margin: 0px and border-radius: 0px to bottom (primary) nav, Else made margin and border-radius same as initial state
If scrollDir == "down" added translateY(-50px) to header, Else removed translateY
Moving the whole header will move both navs which is nice as compared to moving them individually

I've slightly changed your transitions and added transitions to the classes which you toggle.
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
transition: .3s all;
}
.netnav.show-nav {
top: 0;
transition: .3s all;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition: .3s all;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: .3s all;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: .3s all;
}

I followed the link you provided and edit the JavaScript and CSS.
Fixed the transitions in the CSS that does not seem smooth in transitioning when scrolling up or down using JavaScript.
You may visit this pen that I edited based on your snippet, and play around with it.
$(window).scroll(function(){
if ($(this).scrollTop() > 15) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('RemoveTop');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('RemoveTop');
$('.mainnav').removeClass('scrolled');
}
});
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap{
display:block;
position: fixed;
width: 100%;
}
.netnav{
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
transition: all .3s;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0,-40px,0);
transition-duration: .4s;
}
.mainnav{
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: all .3s,width .3s;
width: calc(100% - 60px);
}
.mainnav.RemoveTop {
top: 0px;
}
.mainnav.scrolled {
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>