css动画transition和animation实现遮罩动画

用两种属性实现遮罩动画

• transition在hover和移开的时候都会有渐变动画
• animation只有在hover的时候有渐变动画，移开图片遮罩层直接消失

 

                

                    

                        
                            
                            
匿光决锋者-夏侯惇
                        
                    
                    

                        
                            
                            
匿光决锋者-夏侯惇
                        
                    
                    

                        
                            
                            
匿光决锋者-夏侯惇
    
                        
                    
                    

                        
                            
                            
匿光决锋者-夏侯惇
                        
                    
                

 用transition实现

1. 设置正常状态opacity为0     opacity:0
2. hover状态opacity为1          opacity:1
3. 在正常状态设置要改变的值（可以写all代表全部）动画时间 动画  transition:opacity 300ms ease-in

        .other-skin .item .mask {
            display: flex;

            //透明度为0
            opacity: 0;

            background-color: rgba(0, 0, 0, .88);

            //添加opacity动画 也可以写all
            transition: opacity 300ms ease-in;
        }

        .other-skin .item:hover .mask {
            
            opacity: 1;
     
        }

用animation实现

1. 设置正常状态不可见           display:none
2. 设置动画名与动画过程       @keyframes maskframes{}
3. 设置hover状态可见，并且加上动画  display:flex  animation:maskframes 300ms ease-in

         .other-skin .item .mask {
            
            //正常状态不可见
            display: none;

            background-color: rgba(0, 0, 0, .88);
        }
        
        @keyframes maskframes {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        .other-skin .item:hover .mask {
            
            //在hover状态可见 并且添加maskframes的动画
            display: flex;
            animation: maskframes 300ms ease-in-out forwards;
        }

transition写起来方便一点，但是必须要有事件触发，而且一般是只执行一次 

animation写起来麻烦一点，可以重复执行多次

根据具体的需求选择动画属性