Css3 Transition Not Working

CSS3 Transition not working

Transition is more like an animation.

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

So you need to invoke that animation with an action.

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

Also check for browser support and if you still have some problem with whatever you're trying to do! Check css-overrides in your stylesheet and also check out for behavior: ***.htc css hacks.. there may be something overriding your transition!

You should check this out: http://www.w3schools.com/css/css3_transitions.asp

Css transition not working with css animation

The problem is that CSS animation animates the background color, but doesn't change the value.

There is no transition once you stop hovering because the color is the same.

You may get what you're looking for with a simple transition:

.arc_en_ciel{
    width: 300px;
    height: 300px;
    background-color: rgb(64, 137, 126);
    transition: background-color 0.7s ease-in-out;
}

.arc_en_ciel:hover{
    background-color: #1f5e54;
    transition: background-color 0.7s ease-in-out;
}
<div class="arc_en_ciel"></div>

CSS Transitions Not working after toggle between classes

TL;DR. See the code snippet below which is slightly tweaked from your original code.

A few notes:

  1. Consider using button instead of a tag. It's a button that does something when clicked as opposed to a hyperlink that directs to a link when clicked.
  2. Be careful with overly specific CSS rules. div.button-dropdown-options (i.e. element name + class name) is more specific than .button-dropdown-options (i.e. class name only), and can trump other less specific selectors. It is what makes you overly rely on !important in multiple places. Over specificity and !important in combination will make it very hard to debug styling.
  3. visibility as part of transition property as well. That is, something like transition: opacity 2s, visibility 2s;

function showDropDown() {
  const variantButton = document.getElementById('showdropdown');
  const variantMenu = document.getElementById('variantMenu');
  const animate_arrow = document.querySelector('.btn-dropdown-caret');
  const options = document.querySelector('.btn-dropdown-options');
  const over = document.querySelector('.swiper-container');
  const calculatedOptions = window.getComputedStyle(options);

  variantButton.addEventListener('click', function(event) {
    variantMenu.classList.toggle('dropdownShow');
    animate_arrow.classList.toggle('animate-arrow');
  });

}
showDropDown();
.btn-dropdown {
  display: block;
  position: relative;
  white-space: nowrap;
  margin-top: 5px;
  margin-left: 2px;
}

@media screen and (min-width: 768px) {
  .btn-dropdown {
    z-index: 4;
  }
}

.btn-dropdown .btn-dropdown-link {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

.form-btn.outlined.btn-dropdown-link {
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  /* -webkit-transition: color 200ms ease;
    transition: color 200ms ease; */
  border: 1px solid #dddddd;
  box-shadow: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  color: #6e6d7a;
}

.form-btn.outlined.btn-dropdown-link:hover,
.form-btn.outlined.btn-dropdown-link:focus {
  border: 1px solid #e4b29b;
  color: #1b1b1b;
  box-shadow: 0 0 0 2px rgb(228 178 155 / 10%);
}

.form-btn.outlined.btn-dropdown-link:hover svg,
.form-btn.outlined.btn-dropdown-link:focus svg {
  fill: #666666;
}

.animate-arrow {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(-50%) rotate(180deg) !important;
}

.form-btn.outlined,
a.form-btn.outlined {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
  box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
  color: #0d0c22;
}

.btn-dropdown .btn-dropdown-link {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 35px;
  text-align: left;
}

.form-btn,
a.form-btn {
  background: #f3f3f4;
  color: #0d0c22;
}

.form-btn,
a.form-btn {
  display: inline-block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  padding: 10px 16px;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
  border: none;
  border-radius: 10px;
  outline: none;
  background: #ea4c89;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Variant Selector --Span */

.btn-dropdown.btn-dropdown-neue svg.btn-dropdown-caret {
  fill: #9e9ea7;
}

.btn-dropdown svg.btn-dropdown-caret {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin: 0;
  -webkit-transform: translateY(-50%) rotate(0deg);
  -ms-transform: translateY(-50%) rotate(0deg);
  transform: translateY(-50%) rotate(0deg);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  fill: currentColor;
}

.form-btn svg,
button.form-btn svg {
  width: 13px;
  height: 13px;
  margin-top: -3px;
  margin-right: 2px;
  fill: currentColor;
  vertical-align: middle;
}

/* DropDown */

.btn-dropdown .btn-dropdown-options {
  right: 0;
}

.btn-dropdown div.btn-dropdown-options {
  z-index: 2;
}

.btn-dropdown-options {
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  position: absolute;
  z-index: 1;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  margin-top: 4px;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s, visibility 2s;
  box-shadow: 0px 1px 2px rgba(128, 138, 157, 0.12), 0px 8px 32px rgba(128, 138, 157, 0.24);
}

.btn-dropdown-options ul {
  padding: 8px 0;
  list-style: none;
}

.btn-dropdown-options li.active a {
  color: #ea4c89;
  font-weight: 500;
  text-decoration: none;
}

.btn-dropdown-options a {
  display: block;
  padding: 8px 15px;
  color: #6e6d7a;
  font-size: 13px;
  text-decoration: none;
}

.btn-dropdown-options.dropdownShow {
  /* animation: 0.3s ease 0s 1 normal forwards running dropdownAnimation !important; */
  visibility: visible;
  opacity: 1;
}

.visuallyhidden {
  opacity: 0;
}
<span class="btn-dropdown btn-dropdown-neue">
  <button id="showdropdown" class="form-btn outlined btn-dropdown-link" data-dropdown-state="closed">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" class="icon btn-dropdown-caret">
      <path d="M21.5265 8.77171C22.1578 8.13764 22.1578 7.10962 21.5265 6.47555C20.8951 5.84148 19.8714 5.84148 19.24 6.47555L11.9999 13.7465L4.75996 6.47573C4.12858 5.84166 3.10492 5.84166 2.47354 6.47573C1.84215 7.10979 1.84215 8.13782 2.47354 8.77188L10.8332 17.1671C10.8408 17.1751 10.8486 17.183 10.8565 17.1909C11.0636 17.399 11.313 17.5388 11.577 17.6103C11.5834 17.6121 11.5899 17.6138 11.5964 17.6154C12.132 17.7536 12.7242 17.6122 13.1435 17.1911C13.1539 17.1807 13.1641 17.1702 13.1742 17.1596L21.5265 8.77171Z"></path>
    </svg>
    <span data-prompt="Variant" data-fade-default="true" class="default-option">
      Sandle Brown
    </span>
</button>

<div id="variantMenu" class="btn-dropdown-options sets-querystring">
  <ul>
    <li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option"><a href="?timeframe=">Now</a></li>
  </ul>
</div>
</span>

Transforming and tranisitions in CSS | Transition not working

Are you sure you've placed <label>...</label> immediately after <input type="checkbox"/>? Code seems fine, although I'm not sure what is the purpose of input[type="checkbox"]{ display: none; }. Posting html would be nice too.

Also you can check if provided svg's url is correct. Try to replace it with some other svg url found on internet.

Css animation: transition not working in reverse direction

You can do transform: scale(0.8) translateY(-60px); on hover instead of adding animation. I've changed following css and forked your codepen. This is working as you want.

.navmenu ul li a i{
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  color: orange;
}
.navmenu ul li a:hover i{
  -webkit-transform: scale(0.8) translateY(-60px);
  transform: scale(0.8) translateY(-60px);
  color: orange;
}

Here is the snippet as well.

body {
  background: black;
}

ul {
  list-style: none;
}

.navmenu {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.navmenu ul {
  padding-left: 40px;
  position: relative;
}

.navmenu ul li {
  padding: 15px 0;
}

.navmenu ul li a {
  text-decoration: none;
  position: relative;
  font-size: 1.8rem;
  font-weight: 900;
}

.navmenu ul li a span {
  font-size: 1rem;
  padding-left: 20px;
  color: orange;
  /*   transition: all 0.1s; */
  font-weight: 600;
  display: none;
}

.navmenu ul li a i {
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  color: orange;
}

.navmenu ul li a:hover i {
  -webkit-transform: scale(0.8) translateY(-60px);
  transform: scale(0.8) translateY(-60px);
  color: orange;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <nav class="navmenu">
    <ul>
      <li><a href="#home" class=""><i class="fas fa-home"></i><span>Home</span></a></li>
      <li><a href="#projects" class=""><i class="fas fa-laptop-code"></i><span>Projects</span></a></li>
      <li><a href="#skills" class=""><i class="fas fa-code"></i><span>Skills</span></a></li>
      <li><a href="#training" class=""><i class="fas fa-dumbbell"></i><span>Training</span></a></li>
      <li><a href="#education" class=""><i class="fas fa-user-graduate"></i><span>Education</span></a></li>
      <li><a href="#contact_me" class=""><i class="far fa-address-book"></i><span>Contact me</span></a></li>
    </ul>
  </nav>

</body>

CSS transition not working with classList.add

The major issue is that you're trying to transition the display attribute, which cannot be transitioned: https://www.w3schools.com/cssref/pr_class_display.asp So instead, we'll define your display attribute as you like but we'll add the opacity and visibility attributes and make those our goal for transition. We'll also specify a timing operation with linear which you can change at your discretion (see: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) and we'll transition everything for the sake of keeping it simple since you don't have any real need for specificity here. Hope that helps, let me know if you have any questions :)

Edit: added a light-blue to the body just so you can see everything happening but you can take that out obviously.

const sidemenu = document.getElementById('sidemenu');
const sidemenuContent = document.getElementById('sidemenu__content');
const abrirSidemenu = document.getElementById('sidemenu__open');
const cerrarSidemenu = document.getElementById('sidemenu__close');
const sidemenubg = document.getElementById('fondo-modal');

abrirSidemenu.addEventListener('click', () => {
  sidemenu.classList.add('show-sidemenu');
  sidemenuContent.classList.add('sidemenuContent__animation');
  sidemenubg.classList.add('opacity__animation');
});
cerrarSidemenu.addEventListener('click', () => {
  sidemenu.classList.remove('show-sidemenu');
  sidemenuContent.classList.remove('sidemenuContent__animation');
  sidemenubg.classList.remove('opacity__animation');
});
sidemenubg.addEventListener('click', () => {
  sidemenu.classList.remove('show-sidemenu');
  sidemenuContent.classList.remove('sidemenuContent__animation');
  sidemenubg.classList.remove('opacity__animation');
});
body {
  background-color: lightblue;
}

.sidemenu {
  display: grid;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s linear;
}

.fondo-modal {
  display: block;
  position: absolute;
  visibility: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: black;
  opacity: 0;
  transition: all 0.5s linear;
}

.sidemenu__content {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -350px;
  width: 350px;
  height: 100%;
  background-color: white;
  z-index: 10;
  padding: 5rem 2rem 0;
  overflow-y: auto;
  transition: all 0.5s linear;
}

.show-sidemenu {
  visibility: visible;
  opacity: 1;
  left: 0;
  transition: all 0.5s linear;
}

.sidemenuContent__animation {
  visibility: visible;
  left: 0;
  transition: all 0.5s linear;
}

.opacity__animation {
  visibility: visible;
  opacity: 0.2;
  transition: all 0.5s linear;
}
<div class="topmenu__left">
  <button id="sidemenu__open">OPEN</button>
  <div class="sidemenu" id="sidemenu">
    <div class="fondo-modal" id="fondo-modal">modal</div>
    <div class="sidemenu__content" id="sidemenu__content">
      <button id="sidemenu__close">CLOSE</button>
    </div>
  </div>
</div>

CSS3 transition is not working

I see two issues here:

1) You are defining your transitions on the .nav element, but only changing the color of the a element on hover

2) You are only specifying a transition of width, not background color

Here is what you are probably looking for:

.nav a {
  -webkit-transition: all 2s linear;
  -moz-transition: all 2s linear;
  transition: all 2s linear;
} 

.nav a:hover
{
  color:black;
  background-color:white;
}

.nav
{
width:200px;
position:relative;
left:10px;
top:125px;
background-color:black;
font-size:1.4em;
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
text-align:center;
color:white;
text-decoration:none;
vertical-align:middle;
}

Related Topics

Twitter Bootstrap - Same Heights on Fluid Columns

How to See the CSS Files Loaded in a Page in Google Chrome

How to Remove the Blue Halo Glow from Jquery Mobile Input Elements That Receive Focus

How to Get IE8 to Accept a CSS :Before Tag

How to Make Angled Tab Like This Using CSS

Flexbox, Min-Height, Margin Auto and Internet Explorer

CSS Positioning to Fill Container: Width VS. Left/Right

How to Simply Parse a CSS Like (!) File in My Qt Application

Nth-Child Repeat in a Loop

Flying Saucer Font for Unicode Characters

How to Convert a Numeric Value into a Percentage (Or) Append Percentage Symbol to a Number

Seek to Specific Keyframe in CSS3 Animation

Textarea::Selection and ::-Moz-Selection

Background Gradients in IE7 with CSS

How to Update SASS Variables in Media Queries

Knitr Style Table with CSS

Is There Any IE8 Only CSS Hack

Pixel Density, Retina Display and Font-Size in CSS


Leave a reply



Submit