transition与animation

最新推荐文章于 2024-10-24 20:22:53 发布

转载最新推荐文章于 2024-10-24 20:22:53 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jelly7723/p/5604737.html

本文详细介绍了如何使用CSS transition实现按钮滑动效果，并探讨了transition与animation的区别。通过实例展示了如何将transition转换为animation实现自动播放动画。

以前，一直都知道，transition是animation的一个简化版，甚至不算是动画，而是一种过渡。

transition的用法

早两天用transition写了一个按钮滑动的效果，类似于IOS的设置里面的按钮，截图如下，自己脑补画面

这个效果的主要处理就是，通过判定checked来判定两种状态，即点击前后的两种状态

点击前
#box:after{
            content:'';
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: -5px;
            background-color: #fff;
            border-radius: 25px;


            /*加上阴影特效，这个是复制过来的，对于一个非设计师来说加阴影实在太难掌握*/
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

            /*加上动画特效*/
            transition: 0.4s;
}

点击后
#btn:checked~#box:after{
        left: 42px;
        background-color: #4285F4;
}

然后简单的在变化的样式里面加上transition即可

这里，动画效果是被动发生的，即我们进行了一系列操作，比如点击或者hover才会发生动画

变被动为主动（transition切成animation）

那么，如果我们想让上述动画效果变成自动发生该怎么样呢？

先加上关键帧

@keyframes todo {

        0%{
            left: 0;
            background-color: #fff;
        }

        100% {
            left: 42px;
            background-color: #4285F4;
        }
    }

@keyframes todo-bg {
        0%{
            background-color: #ccc;
        }

        100%{
            background-color: #376ecb;
        }
    }

加完关键帧之后，再在原本的样式上加上animation即可

#box {
        animation: todo-bg 0.4s infinite alternate;
    }

#box:after {
        animation: todo 0.4s infinite alternate;
    }

这样，我们一打开浏览器，动画就会自动开始执行而不需要点击或者其它操作这是我目前认为的transition与animation的另一区别

扩展，同时也是animation的另一正式用法

还是上面的例子，除了可以使用transition达到被动动画之外，我们也可以使用animation达到被动动画效果

keyframe保持不变，把animation加在点击后的样式中即可

总结，transition可以用来做被动动画，animation既可以做被动动画，还可以做主动动画

转载于:https://www.cnblogs.com/jelly7723/p/5604737.html