css3动画的实现

最新推荐文章于 2022-07-06 23:03:37 发布

weixin_30710457

最新推荐文章于 2022-07-06 23:03:37 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/jiazhifeng/p/11294336.html

版权

### 首先最重要的两个

++ 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);
    }
}

转载于:https://www.cnblogs.com/jiazhifeng/p/11294336.html