CSS动画: animation和transition

最新推荐文章于 2023-10-16 17:00:25 发布

CamilleZJ

最新推荐文章于 2023-10-16 17:00:25 发布

阅读量587

点赞数 1

分类专栏：前端文章标签： animation和transition css动画

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CamilleZJ/article/details/90174241

版权

前端专栏收录该内容

123 篇文章 2 订阅

订阅专栏

注意：最近做一个弹框效果：要求弹框从下面渐变（opacity）弹出：

但是页面加载成功后没有这个渐变过程，弹框是已加载后就存在了，感觉transition没起作用

原因：transition触发需要操作，不能自动触发

解决：添加触发条件，若是页面加载自动触发可考虑animation

一、transition：

1、语法：transition{ transition-property transition-duration transition-timing-function transition-delay}

transition-property：是用来指定当元素其中一个属性改变时执行transition效果，值有none（没有属性改变）、all（默认值，所有属性改变），indent（某个属性名，一条transition规则，只能定义

一个属性的变化，不能涉及多个属性，如果要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果。

transition-duration ：过渡时间，是用来指定元素转换过程的持续时间，单位为s（秒）或ms（毫秒）

transition-timing-function：时间函数，允许你根据时间的推进去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in(加速) 、ease-out（减速）、ease-in-out：（加速然后减速）、cubic-bezier：（该值允许你去自定义一个时间曲线） 贝塞尔曲线扫盲工具网站

transition-delay：延迟，指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，单位为s（秒）或ms（毫秒）

2 、触发方式

　　伪类触发：:hover : focus :checked :active

　　js触发：toggleClass

3、以下情况下，属性值改变不能产生过渡效果

background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等，浏览器支持情况
float浮动元素
height或width使用auto值
display属性在none和其他值（block、inline-block、inline）之间变换
position在static和absolute之间变换

4、transition位置：

<body>
 <div id="box1">BOX1</div>
</body>

样式：

//样式一：
<style>
    #box1 {
        height: 100px;
        width: 100px;
        background: green;
        transition: background 2s ease,transform 2s ease-in 1s;
    }
    #box1:hover{transform:rotate(180deg) scale(.5,.5);background:red;}
</style>

//样式二
<style>     
    #box2{
        height: 100px;
        width: 100px;
        background: blue;
    }
    #box2:hover{
        transform: rotate(180deg) scale(.5, .5);
        background: red;
        transition: background 2s ease, transform 2s ease-in 1s;
    }
</style>

样式一：当鼠标在div上悬停，div的样式从原始样式过渡到div：hover的样式；当鼠标离开div，样式又从div：hover过渡到div默认样式。这两个方向上的过渡都是平滑不突兀的

样式二：当鼠标在div上悬停，div的样式从原始样式过渡到div：hover的样式；当鼠标离开div，样式会从div：hover的样式回到原始样式，但不是过渡动画的方式，而是直接回到原始样式，看上去比较突兀和生硬。

如上：样式一盒样式二transition的位置，应该使用样式一的transition位置，才能实现动画的平滑过渡

二、animation

//其中0%和100%还可以使用关键词from和to来代表
@keyframes changebox {
    10% {  background:red;  }
    50% {  width:80px;  }
    70% {  border:15px solid yellow;  }            
    100% {  width:180px;  height:180px;  }
}

使用： animation: changebox 10s ease-in-out 3 alternate paused;

上面动画执行分析：

特别注意的是：每一个百分号后面的样式变化都是从0s开始的，除非有两个百分比设置了同一个样式的变化（上方的例子，50% { width:80px; } 100%{width:150px;}，那么宽度的整体情况会是0~5s中宽

度由原始值变为80px；5~10s间，宽度由80px变为180px；），个人理解，在这个过程中，不是一个动画，而是多个小动画（自己起的名字，方便后面区分animation）按照设定好的百分比对应的时间正好执行完成结

同一时间内有可能有多个小动画同时在执行，也有可能只有一个小动画在执行。

语法：animation: name duration timing-function delay iteration-count direction;

animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致

animation-duration ：指定元素播放动画所持续的时间

animatino-timing-function ：和transition中的transition-timing-function 中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。

animation-delay：定义在浏览器开始执行动画之前等待的时间，这里是指整个animation执行之前的等待时间，而不是上面说的多个小动画

animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1,；取值为infinite，动画将无限次的播放。

animation-direction：主要用来设置动画播放方向，其主要有两个值：