Плавное появление без JS\jQuery

#html #css #transition

Вопрос следующий, возможно ли плавное появление блока dropdown без использования
JS jQuery и т.п.? Если да то как? transition не срабатывал...   



.menu:focus ~ .dropdown{
display: block;
}

.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
display: none;
}
      
    

        
Smart
    
    
    

        

            Menu1
        
        

            Menu2
        
        

            Menu3
        
        

            Menu4
        
    




    

Ответы

Ответ 1

transition не применим к свойству display: none | block; 

Вариант 1 opacity:



.menu:focus ~ .dropdown{
  opacity: 1;
}

.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;
opacity: 0;
  
  transition: all .5s ease-in-out;
}
      
    

        
Smart
    
    
    

        

            Menu1
        
        

            Menu2
        
        

            Menu3
        
        

            Menu4
        
    





Вариант 2 scale:



.menu:focus ~ .dropdown{
 transform: scale(1);
}

.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;

  transform: scale(0);
  
  transition: all .3s ease-in-out;
}
      
    

        
Smart
    
    
    

        

            Menu1
        
        

            Menu2
        
        

            Menu3
        
        

            Menu4
        
    





Вариант 3 translateX:



.menu:focus ~ .dropdown{
 transform: translateX(0%);
}

.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;

  transform: translateX(-1000%);
  
  transition: all .3s ease-in-out;
}
      
    

        
Smart
    
    
    

        

            Menu1
        
        

            Menu2
        
        

            Menu3
        
        

            Menu4
        
    





Вариант 4 translateY:



.menu:focus ~ .dropdown{
 transform: translateY(0%);
}

.main-head .dropdown{
position: absolute;
margin-top: 85px;
right: 210px;

  transform: translateY(-1000%);
  
  transition: all .3s ease-in-out;
}
      
    

        
Smart
    
    
    

        

            Menu1
        
        

            Menu2
        
        

            Menu3
        
        

            Menu4
        
    





Вариант с absolute:



body {
  overflow: hidden;
}

.menu:focus ~ .dropdown{
  right: 210px;
}

.main-head .dropdown{
  position: absolute;
  margin-top: 85px;
  right: -9999px;  
  transition: all .5s ease-in-out;
}
      
    

        
Smart
    
    
    

        

            Menu1
        
        

            Menu2
        
        

            Menu3
        
        

            Menu4
        
    



Ответ 2

.dropdown {
  position: relative;
  overflow: hidden;
  margin-top: 85px;
  height: 0px;
  width: 100px;
}
@keyframes down1 {
  0% {
    height: 0;
  }
  10% {
    height: 10;
  }
  25% {
    height: 25px;
  }
  40% {
    height: 40;
  }
  50% {
    height: 50px;
  }
  60% {
    height: 60;
  }
  75% {
    height: 75px;
  }
  80% {
    height: 80;
  }
  100% {
    height: 100px;
  }
}

.menu:focus ~ .dropdown {
  outline: 1px solid #ccc;
  animation-name: down1;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  height: 100px;
}

  

    
Smart
  
  
  

    

      Menu1
    
    

      Menu2
    
    

      Menu3
    
    

      Menu4
    
  



Ответ 3

Попробуйте @keyframes при нажатии на dropdown @keyframes будет анимировать ваш ul .