Transitioning Opacity in CSS

Question

Transitioning Opacity in CSS

I found inspiration for my project from the following source: https://codepen.io/plavookac/pen/qomrMw

One challenge I'm facing is changing the opacity of the movement, which is not covered by the standard transition markers.

.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.mainInner div{
    display:table-cell;
    vertical-align: middle;
    font-size: 4em;
    font-weight: bold;
    letter-spacing: 1.25px;
}
         // More CSS code...

  <nav class="navbar navbar-light custom-navbar" >
    // More HTML code...

As a mechanical engineer trying to build a portfolio, I'm working on putting together enough HTML and CSS. I've trimmed down the code, but I'm open to any suggestions or pointers.

html css

Answer 1

Answer №1

The transition markers specified in the standard cover this scenario:

To enhance your #sidebarMenu, consider chaining the transitions instead of having them on separate lines. Start with an initial state of opacity 0;

#sidebarMenu {
  transition: transform 250ms ease-in-out, opacity 350ms ease-in-out;
  opacity: 0;
}

When toggling the menu state, update it to opacity: 1

input[type="checkbox"]:checked ~ #sidebarMenu {
  transform: translateX(0);
  opacity: 1;
}

Answer 2

The transition markers specified in the standard cover this scenario:

To enhance your #sidebarMenu, consider chaining the transitions instead of having them on separate lines. Start with an initial state of opacity 0;

#sidebarMenu {
  transition: transform 250ms ease-in-out, opacity 350ms ease-in-out;
  opacity: 0;
}

When toggling the menu state, update it to opacity: 1

input[type="checkbox"]:checked ~ #sidebarMenu {
  transform: translateX(0);
  opacity: 1;
}

Answer 3

Answer №2

To animate multiple properties during a transition, you should separate them with commas. Otherwise, the second declaration for the transition property will override the first one.

.mainInner {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}

.mainInner div {
  display: table-cell;
  vertical-align: middle;
  font-size: 4em;
  font-weight: bold;
  letter-spacing: 1.25px;
}

#sidebarMenu {
  margin-top: 0px;
  transform: translateY(-80px);
  transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
  z-index: 1;
  position: relative;
  opacity: 0.7;
}

.sidebarMenuInner {
  position: relative;
  margin: 0;
  padding: 0;
  top: 30px;
  right: -40px;
  width: 150px;
  background: linear-gradient(0deg, #bee 00%, #bbe 100%);
  border-top: px solid rgba(255, 255, 255, 0.10);
  border-left: px solid rgba(0, 0, 0, 1);
}

.sidebarMenuInner li {
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.sidebarMenuInner li span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

input[type="checkbox"]:checked~#sidebarMenu {
  transform: translateX(0);
  opacity: 1;
}

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.spinnerContainer {
  position: relative;
  height: 100%;
  width: 100%;
  top: 30px;
  left: 20px;
  height: 22px;
  width: 22px;
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  z-index: 99;
  height: 100%;
  width: 100%;
}

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #000;
}

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

<nav class="navbar navbar-light custom-navbar">
  <div class="container">
    <div class="spinnerContainer">
      <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
      <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1" ></div>
    <div class="spinner horizontal" ></div>
    <div class="spinner diagonal part-2" ></div>
  </label>
      <div id="sidebarMenu">
        <ul class="sidebarMenuInner">
          <li><a href="./index.html" target="_blank">Line 1</a></li>
          <li><a href="./index.html" target="_blank">Line 2</a></li>
          <li><a href="./index.html" target="_blank">Line 3</a></li>
          <li><a href="./index.html" target="_blank">Line 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <br>
</nav>

Answer 4

To animate multiple properties during a transition, you should separate them with commas. Otherwise, the second declaration for the transition property will override the first one.

.mainInner {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}

.mainInner div {
  display: table-cell;
  vertical-align: middle;
  font-size: 4em;
  font-weight: bold;
  letter-spacing: 1.25px;
}

#sidebarMenu {
  margin-top: 0px;
  transform: translateY(-80px);
  transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
  z-index: 1;
  position: relative;
  opacity: 0.7;
}

.sidebarMenuInner {
  position: relative;
  margin: 0;
  padding: 0;
  top: 30px;
  right: -40px;
  width: 150px;
  background: linear-gradient(0deg, #bee 00%, #bbe 100%);
  border-top: px solid rgba(255, 255, 255, 0.10);
  border-left: px solid rgba(0, 0, 0, 1);
}

.sidebarMenuInner li {
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.sidebarMenuInner li span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

input[type="checkbox"]:checked~#sidebarMenu {
  transform: translateX(0);
  opacity: 1;
}

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.spinnerContainer {
  position: relative;
  height: 100%;
  width: 100%;
  top: 30px;
  left: 20px;
  height: 22px;
  width: 22px;
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  z-index: 99;
  height: 100%;
  width: 100%;
}

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #000;
}

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

<nav class="navbar navbar-light custom-navbar">
  <div class="container">
    <div class="spinnerContainer">
      <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
      <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1" ></div>
    <div class="spinner horizontal" ></div>
    <div class="spinner diagonal part-2" ></div>
  </label>
      <div id="sidebarMenu">
        <ul class="sidebarMenuInner">
          <li><a href="./index.html" target="_blank">Line 1</a></li>
          <li><a href="./index.html" target="_blank">Line 2</a></li>
          <li><a href="./index.html" target="_blank">Line 3</a></li>
          <li><a href="./index.html" target="_blank">Line 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <br>
</nav>

Transitioning Opacity in CSS

Answer №1

Answer №2

Similar questions

What are the advantages of incorporating JSON for retrieving data from MySQL?

Implementing reCAPTCHA and PHP for Email Form Submission

I am having trouble getting my divs to show up side by side in one line

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

Encountering an "Unmet Peer Dependency" error message while attempting to integrate bootstrap-ui into my Angular project

AngularJS: Utilizing UI Bootstrap Popover with the Placement Set to 'bottom-right'

What is the best way to align an error message in the middle of an HTML table?

What is the best way to ensure my hover caption spans the entire size of the image?

Encountering additional backslashes ("") in each slash within the JSON response received from Laravel AJAX

What is the reason for adding CSS styles to a JavaScript file without importing them?

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

What is the best way to adjust the size of the circles in my d3 leaflet implementation based on the frequency of longitude/latitude pairs?

Create objects in the gallery

Menu Design Inspired by Amazon Using jQuery

Personalized color scheme for calendar td

Can Microsoft Bot Framework chat window support rounded border corners?

Ways to designate a tab as active

Creating colorful containers using Bootstrap

Switch the CSS class with an HTML tag

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph