css3动画的实现

Posted 2022-06-07 jiazhifeng

 

### 首先最重要的两个 

 

 ++ animation  css属性 至少有2个属性值   animation : myfirst 5s ;   (动画名 和 动画时长)

简写　: 

myfirst	5s	linear(ease)	2s	infinite(33)	alternate(normal)
name	duration	timing-function	delay	iteration-count	direction
动画名	动画总时长(默认0s)	匀速(先快后慢)(默认ease)	开始时间(默认0s)	循环无限次(33次)(默认1)	倒着放(正着放)(默认正着)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

.swiper-container.swiper2 .swiper-mask 
    display: none;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    width: 270px;
    height: 360px;
    top: 0;
    left: 0;
    z-index: 70;

    /*  用css选择器 中需要添加动画的 元素  这个当元素渲染到页面上是 会执行动画   
   　　手动控制可以通过js给元素添加animation 实现 或 添加 display:none*/
    animation: getintoContainer 1s ease infinite alternate;

    /* 兼容 Firefox: */
    -moz-animation: getintoContainer 1s ease infinite alternate;

    /* 兼容  Safari 和 Chrome: */
    -webkit-animation: getintoContainer 1s ease infinite alternate;

    /* 兼容 Opera: */
    -o-animation: getintoContainer 1s ease infinite alternate;

　　

　　++ @keyframes 定义动画 的过程 还有一种 from to 形式 没这个好用, 这个可以定义 动画进行到 25% 或其它进程时 进行什么动画.

　　　　-- @keyframes 定义了动画 和 动画名 让 animation 这个属性使用 

@keyframes getintoContainer 
    0% 
        left: 15px;
        top: 15px;
        width: 240px;
        height: 330px;
        background-color: rgba(0, 0, 0, 0);
    

    100% 
        left: 0px; 
        top: 0px; 
        width: 270px;
        height: 360px;
        background-color: rgba(0, 0, 0, .5);