【css】网页动画 transform transition animation 含案例北极熊奔跑

一二小选手

于 2024-08-12 08:20:35 发布

阅读量327

点赞数 14

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_66584716/article/details/141116974

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

如何在网页中实现动画效果？

动态图片（JIF）
Flash
JavaScript
C3动画

变形transform

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

transform:[transform-function] *;
/* transform只能写一个 若写多个 最后一个会覆盖前面的 
设置变形函数，可以是一个，也可以是多个，中间以空格分开 */

变形函数

translate()：平移函数，基于X、Y坐标重新定位元素的位置

translate(X,Y); /* 像素px */

/* 只设置X轴的位移 */
transform:translate(100px,0) ==> transform:translateX(100px)
/* 只设置Y轴的位移 */
transform:translate(0,100px) ==> transform:translateY(100px)

scale()：缩放函数，可以使任意元素对象尺寸发生变化

scale(X,Y); /* 倍数 */

/* 只设置X轴的缩放 */
transform:scale(2,0) ==> transform:scaleX(2)
/* 只设置Y轴的缩放 */
transform:scale(0,2) ==> transform:scaleY(2)

/*scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
缩放基点为中心 若设置宽高变化 变化基点为顶部固定变化*/

rotate()：旋转函数，顺时针旋转

skew(X,Y); /* 度数deg */

skewX(45deg) /* 只设置X轴的倾斜 */
skewY(45deg) /* 只设置Y轴的倾斜 */

/*可以仅设置沿着X轴或Y轴方向倾斜*/

skew()：倾斜函数

rotate(a);
/*
参数a单位使用deg表示
参数a取正值时元素相对原来中心顺时针旋转
*/

小结

rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状

过渡transition

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡

transition:[transition-property  transition-duration  transition-timing-function   transition-delay ] 
/*
transition-property : 过渡或动态模拟的CSS属性
transition-duration : 完成过渡所需要的时间
transition-timing-function : 指定过渡函数
transition-delay : 过渡开始出现的延迟时间
*/

过渡属性（ transition-property ）

定义转换动画的CSS属性名称

IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

过渡所需的时间（ transition-duration ）

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

过渡动画函数（ transition-timing-function ）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

过渡延迟时间（ transition-delay ）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行

过渡的触发机制

伪类触发

:hover、:active、:focus、:checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发

使用transition实现过渡动画的使用步骤

在默认样式中声明元素的初始状态样式
声明过渡元素最终状态样式，如悬浮状态
在默认样式中通过添加过渡函数，添加一些不同的样式

动画animation

简介

animation 实现动画主要由两个部分组成

1.通过类似Flash 动画的关键帧来声明一个动画

2.在animation 属性中调用关键帧声明的动画实现一个更为复杂的动画效果

使用过程

1.设置关键帧

/* 语法 */
@keyframes  IDENT  {
   from {/*CSS样式写在这里*/}
   percentage {/*CSS样式写在这里*/}
   to {/*CSS样式写在这里*/}
}

@keyframes spread {
    0% {width:0;}
    33% {width:23px;}
    66% {width:46px;}
    100% {width:69px;}
}
/* 写兼容的时候浏览器前缀是放在@keyframes中间
例如：@-webkit-keyframes、@-moz- keyframes
*/

2.调用关键帧

animation:
animation-name /* 由@keyframes创建的动画名称 */
animation–duration /* 动画时间 */
animation-timing-function /* 动画方式 */
animation-delay /* 延迟时间 */
animation-iteration-count 
/* 动画的播放次数 
值通常为整数，默认值为1
特殊值infinite，表示动画无限次播放
*/
animation-direction 
/* 动画的播放方向 
normal，动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放
*/
animation-play-state 
/* 动画的播放状态 
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
*/
animation-fill-mode; 
/* 动画开始之前和结束之后发生的操作 
forwards：表示动画在结束后继续应用最后关键帧的位置
backwards：表示会在向元素应用动画样式时迅速应用动画的初始帧
both：表示元素动画同时具有forwards和backwards的效果
*/

案例：使用动画实现北极熊奔跑效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>北极熊奔跑</title>
</head>
<style>
    body {
        background-color: #000;
    }
    div {
        width: 200px;
        height: 100px;
        background-image: url(bear-25676f9.png);
        background-position-x: 0;
        animation: bear steps(8) .6s infinite;
    }
    @keyframes  bear{
        0% {background-position-x: 0;}
        100% {background-position-x: -1600px;}
    }
</style>
<body>
    <div></div>
</body>
</html>

一二小选手

关注

14
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【css】网页动画 transform transition animation 含案例北极熊奔跑

animation 实现动画主要由两个部分组成1.通过类似Flash 动画的关键帧来声明一个动画2.在animation 属性中调用关键帧声明的动画实现一个更为复杂的动画效果。
复制链接

扫一扫