css3-transition

最新推荐文章于 2024-09-02 10:28:14 发布

学崖无海

最新推荐文章于 2024-09-02 10:28:14 发布

阅读量158

点赞数

文章标签： css3 animation

本文链接：https://blog.csdn.net/xueyawuhai/article/details/106983469

版权

让我们回顾一下animation的知识点

animation 属性是一个简写属性，用于设置六个动画属性：

属性	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计时
animation-timing-functio	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

animation-timing-function规定动画的速度曲线

属性	描述
linear	动画从头到尾的速度是相同的
ease	默认。动画以低速开始，然后加快，在结束前变慢cubic-bezier(0.25,0.1,0.25,1)
ease-in	动画以低速开始。cubic-bezier(0.42,0,1,1)
ease-out	动画以低速结束。cubic-bezier(0,0,0.58,1)
ease-in-out	动画以低速开始和结束。cubic-bezier(0.42,0,0.58,1)

animation-direction规定是否应该轮流反向播放动画。

属性	描述
normal	默认值。动画每次循环都是向前（即按顺序）播放
alternate	动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效）

这里附上animation的案例：
在codepen上尝试:
https://codepen.io/neverloseyourway/pen/wVGQKG

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .heart{
                animation: beat 0.5s  infinite alternate;
                position: relative;
                width:150px;
                height: 150px;
                background-color: red;
                transform: rotate(45deg);
                top:100px;
                /*下面的动画分段也要都旋转45度*/
                /*box-shadow: 0 0 5px 5px red;*/
                filter:drop-shadow(0px 0px 20px rgb(255,20,20));

            }
            .heart:before,.heart:after{
                content: '';
                border-radius: 50%;
                position: absolute;
                width: 150px;
                height: 150px;
                background-color: red;

            }
            /*主体被旋转时里面的圆也会旋转，相对位移的方向也被旋转了*/
            .heart:before{
                left: -75px;
            }
            .heart:after{
                top:-75px;
            }
            @keyframes beat{
                0%{
                    transform: scale(0.8,0.8) rotate(45deg);
                }
                50%{
                    transform: scale(1,1) rotate(45deg);
                }
                0%{
                    transform: scale(0.8,0.8) rotate(45deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="heart">

        </div>
    </body>
</html>

到这里只是前情回顾，我们继续往下：

transition动画过渡

容易混淆的translate,transition,transform到底是什么关系？

CSS3中的transform(变形)属性用于内联元素和块级元素，它的属性值有以下五个：

旋转rotate
扭曲skew
scale缩放
移动translate
矩阵变形matrix

可以看出：transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；
而我们要重点讲的transition动画过渡可以使用transfrom来完成的，增加过渡效果的多样性。

transtion属性

transition 属性是一个简写属性，用于设置四个过渡属性：
默认:all 0 ease 0

属性	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duratio	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开

触发方式：
伪类触发：:hover : focus :checked :active
为了让你更好理解，请尝试以下代码：

<style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background-color: slateblue;
                border: aquamarine 3px solid;
                transition:background-color 2s ease;
            }
            .box1:hover{
                background-color: deepskyblue;
            }
        </style>

在codepen上尝试:
https://codepen.io/neverloseyourway/pen/YzzQOoE
可以看到，我们指定背景颜色这个属性发生过渡，持续时间为2s。使用hover触发的时候，将背景颜色的属性值重新赋值。

transition中使用transform,修改上面的一行代码
transition:background-color 2s ease,transform 2s ease-in 1s;

.box1{
		width: 100px;
		height: 100px;
		background-color: slateblue;
		border: aquamarine 3px solid;
		/* transition:background-color 2s ease; */
		transition:background-color 2s ease,transform 2s ease-in 1s;
	}
.box1:hover{
	transform: rotate(180deg) scale(.5,.5);
	background-color: deepskyblue;
}

在codepen上尝试:
https://codepen.io/neverloseyourway/pen/vYYZVBd

animation和transition有什么区别？

相信看完这边文章，说起动画，你就会想起使用animation和transition这两个css属性来达到想要的动画效果。
区别：

CSS3	差异
transition 特性1	在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画
transition 特性2	常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发
transition 特性3	需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发
transition 特性4	只能定义开始状态和结束状态，不能定义中间状态
animation特性1	可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数
animation特性2	网页加载时会直接执行，可以自行控制各阶段动画的变化

学崖无海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-transition

让我们回顾一下animation的知识点animation 属性是一个简写属性，用于设置六个动画属性：属性描述animation-name规定需要绑定到选择器的 keyframe 名称animation-duration规定完成动画所花费的时间，以秒或毫秒计时animation-timing-functio规定动画的速度曲线animation-delay规定在动画开始之前的延迟animation-iteration-count规定动画应该播放的次数
复制链接

扫一扫