css-动画-transition-过渡动画

考点

过渡动画，单词
transition

过渡动画的简写格式
transition: 属性名		过渡时间		运行方式		动画延迟
transition:property	duration	liming-function		delay
例如：
transition: width	4s	ease	0s;
transition:	all	4s	lineal	3s;

过渡动画的运动方式，常用的有匀速，缓冲，请写出单词
匀速，linear
缓冲，ease

过渡动画的时间，要设置时间为3秒钟，应该怎么写这个三秒
3s

过渡动画的时间，要设置时间为500豪秒，如何写这五百豪秒
500ms

根据描述写出样式：过渡动画，让宽度发生变化，持续时间四秒钟，匀速运动，没有延迟
transition:width	4s	linear	0s;

根据描述写出样式：过渡动画，让全属性都变化，持续时间500豪秒，缓冲运动，3秒延迟
transition:width	500ms		ease	3s;

transition

用法

对于一个属性的简写
transition: 属性 持续时间 速度 延迟

对于多个属性的简写
transition: 属性1 持续时间1 速度1 延迟1， 属性2 持续时间2 速度2 延迟2；

对于全属性的变化（待核实）
transition:all 持续时间 速度 延迟

读音的拆分

tran
si
tion

意义

transition动画的属性

property设置过度的属性

transition-property:属性

duration设置过渡的时间

丢锐醒

trannsition-duration：过渡时间

过渡时间
秒，s。 例如一秒，1s
毫秒，ms，例如500毫秒，500ms

timing-function 过渡的运动方式

timing = time 的现在进行时
补充一个英语进行时的语法
动词+ing，代表正在进行
比如
吃eat是动词，正在吃，eating
笑lauth，正在笑，lauthing
同理
time，计时的意思
现在的分词 timeing
现在的分词另一种现态
以e结尾时，去掉e，加ing
timing

python中的现在分词
threading
thread+ing
import threading
t = threading.Thread

multiprocessing = multi多种的+process进程+ing现在分词

function

格式

transition-timing-function:方式

方式两种
一，linear，匀速。直线的意思，理解为速度值是不变的，直线的
二，ease，缓冲。

delay 时间延迟

地雷

用法

transition-delay:延迟时间

连写

transition: 属性 过渡时间 运行速度 动画延迟

应用

需要两个状态
应用的时候，会由状态A变为状态B

代码

<style>
    div{
        width: 100px;
        height: 30px;
        background: red;
        transition:width 4s ease 0s;
        /*transition:all 4s ease 3s;*/
    }

    div:hover{
        width: 600px;
        background: blue;
    }

</style>

<div>123</div>内容

效果

练习-

鼠标入图片时浮现出来说明文字

初步的样式

<style>
    .outter{
        width: 300px;
        height: 400px;
        background: red;
    }

    .img{
        width: 300px;
        height: 400px;
        background: green;
    }

    .info{
        width: 300px;
        height: 100px;
        background: black;
        color:gold;
    }
</style>



<div class="outter">
    <div class="img"></div>
    <div class="info">
        这是说明文字<br>
        这是详明的详情
    </div>

</div>
123

效果

目标
让黑色的块脱离文档流

通过定位方式来脱离
三种定位方式
1相对定位
2绝对定位
3固定定位

经验方面
会把父容器设置一个相对定位，把子容器设置为一个绝对定位
好处
只需要把绝对定位的子容器进行重新定位就可
以父容器左上角作为x0y0的座标来定位

只有获得了定位属性的标签
才会具有left ,right,top ,bottom的属性

代码

<style>
    .outter{
        width: 300px;
        height: 400px;
        background: red;
        position: relative;
    }

    .img{
        width: 300px;
        height: 400px;
        background: green;
    }

    .info{
        width: 300px;
        height: 100px;
        background: black;
        color:gold;
        position: absolute;
        left:0;
        top:0;
    }
</style>



<div class="outter">
    <div class="img"></div>
    <div class="info">
        这是说明文字<br>
        这是详明的详情
    </div>

</div>
123

效果

让黑色的块到底部去
给黑色的块设置一个top值
让这个值=父容器的高度

完整版

代码

<style>
    .outter{
        width: 300px;
        height: 400px;
        background: red;
        position: relative;
        overflow: hidden;

    }

    .img{
        width: 300px;
        height: 400px;
        background: green;
    }

    .info{
        width: 300px;
        height: 100px;
        background-color: rgba(0,0,0,0.2);
        color:gold;
        position: absolute;
        left:0;
        top:400px;
        transition:top 1s linear;
        /*opacity:0.2;*/
    }

    .outter:hover .info{
        top:300px;
    }

</style>



<div class="outter">
    <div class="img"></div>
    <div class="info">
        这是说明文字<br>
        这是详明的详情
    </div>

</div>
123

效果

经验

设置透明度
1，如果只要背景颜色透明有变化，不影响文字
给定颜色属性的时候
使用rgba（）方式
例如
background-color: rgba(0,0,0,0.2);

2，如果希望一个标签里所有的内容都同时有透明度的变化
使用属性opacity
opacity:0.2;

技术点
黑色的文字说明块不见
并不是使用的display:none
而是设置一个父容器的overflow:hidden来实现的