HTML中的动画效果

目录

一、HTML中的动画

二、过渡动画transition

二、transition案例---手风琴效果

三、动画animation

四、线上动画库animate.css

五、2D转换模型 transform

---

一、HTML中的动画

在HTML中也可根据个人要求添加动画，有过渡动画transition和生动的动画效果animation以及线上的动画库

二、过渡动画transition

transition是一种提供了在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程

为页面创建一个div，为其设置背景颜色等属性

页面预览：

当鼠标悬停时，改变大小，之后在加上过渡动画效果

 

页面预览：当鼠标放在div上时，div向右移动，宽度改变，颜色改变

属性：

transition-property是规定应用过渡的CSS属性的名称

transition-duration定义过渡效果花费的时间。默认是0秒

transition-timing-function规定过渡效果的时间曲线。默认是ease

        linear 是以相同速度开始至结束的过渡效果

        ease 是从慢速开始，然后变快，然后慢速结束的过渡效果

        ease-in 是以慢速开始的过渡效果

        ease-out 是以慢速结束的过渡效果

        ease-in-out 是慢速开始和结束的过渡效果

transition-delay规定过渡效果从何时开始，即是延时效果。默认是0

transition是连写格式：

        transition：过渡属性  过渡时长  运动速度 延迟时间

                       transition-property    transition-duration   transition-timing-function   transition-delay

二、transition案例---手风琴效果

页面最终效果：

当鼠标放置在某张图片前时，该张图片放大，其他图片缩小

首先，为页面添置几张图片

 清除页面默认内外边距

为整体框架设置宽高边框等基本属性，为图片设置相同的宽高，将图片浮动起来，且使超过边框的图片其他地方隐藏起来

手风琴效果：当鼠标移入ul时，所有图片缩小，当鼠标移入具体某张图片时，该张图片放大

 注意：在li上设置过渡动画transition

三、动画animation

设置基本的页面

设置animation动画时，要给需要的动画起一个名称，在里面设置0%到100%的变化

 页面预览：

初始页面

动画结束时：

属性：

        animation-name 是绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

        animation-duration是动画的完成时间，告诉系统动画持续的时长

        animation-timing-function是设置动画如何完成一个周期，告诉系统动画执行的速度（与过度动画类型）   

                linear 是以相同速度开始至结束的过渡效果

                ease 是从慢速开始，然后变快，然后慢速结束的过渡效果

                ease-in 是以慢速开始的过渡效果

                ease-out 是以慢速结束的过渡效果

                ease-in-out 是慢速开始和结束的过渡效果

        animation-delay 设置动画在启动前的延迟间隔

        animation-iteration-count 定义动画的播放次数，告诉系统动画需要执行几次

                n 定义动画播放n次                infinite无限次往返执行

        animation-direction 指定是否应给轮流反向播放动画

                normal 默认取值 ，执行一次后回到起点继续执行下一次

                alternate 往返动画，执行完一次后往回执行下一次

                reverse 方向执行

        animation-fill-mode 规定当动画不播放时（完成时，延时未开始播放时），应用到的元素样式

                none 不做任何改变        forwards 结束时保持动画最后一帧的样式

                backwards 等待时显示动画第一帧的样式

                both 等待时显示动画第一帧的样式，结束时保持动画最后一帧的样式

        animation-play-state 告诉系统当前动画是否需要暂停

 

页面预览：

四、线上动画库animate.css

在CDN中引入animate的cdn，具体网址：https://www.bootcdn.cn/

在底下有其搜索内容，点击第一个

选择适合自己的版本，点击后缀为.min.css，进行复制

 将复制的内容粘贴在代码的head标签内的link标签中

 给指定元素加入class"animate__animated <动效名称>

进入线上动画库，选择自己喜欢的动画效果（在侧边栏中），线上动画库地址：https://animate.style

复制去名称

 在代码中复制

 此时页面就会出现对应的动画效果

五、2D转换模型 transform

transform属性应用从2D或3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜

旋转 rotate    即：transform:rotate(45deg);   其中deg是一种单位，表示角度

页面预览：

平移 translate  即：transform:translate(100px,100px) 

                                第一个参数表示的是水平方向的平移，第二个参数是垂直方向的平移

给页面一个父容器，子元素在父容器中平移

给父容器和子元素设置合适的宽高，给子元素设置平移属性

 页面预览：在未平移之前

平移之后

缩放scale   即transform:scale(n)  其中也可将n分为两个参数

        第一个参数水平方向  第二个参数垂直方向

注意：若参数是1，则代表保持不变；若参数大于1，则表示放大；若参数小于1，则表示缩小

放大：

 页面预览：

缩小：

 页面预览：

 连写格式：

transform:rotate(45deg) translate(100px) scale(0.8)

形变中心点： transform-origin  第一个参数水平方向  第二个参数垂直方向

默认情况下所有元素都是以自己的中心点作为参考来旋转的，但我们可以通过形变中心点来修改他的参考点

是页面子元素旋转

页面预览：

旋转中心为子元素的中心点

改变形变点

页面预览：

 旋转的中心参考点变为左下方