租网站需要多少钱,WordPress播放背景音乐,免费企业网站制作,企业网站建设基本标准CSS的动画
在本节#xff0c;我们将学习keyframes动画。
1. 动画的基本使用
1. 定义动画
定义动画有两种写法#xff1a; 简单定义方式 keyframes 动画名 {/* from代表初始状态 */from {/*property1:value1*/transform: translate(0%);}/* to代表结束状态 */to {transfor…CSS的动画
在本节我们将学习keyframes动画。
1. 动画的基本使用
1. 定义动画
定义动画有两种写法 简单定义方式 keyframes 动画名 {/* from代表初始状态 */from {/*property1:value1*/transform: translate(0%);}/* to代表结束状态 */to {transform: translate(200%);}
}完整定义方式 keyframes 动画名 {/* 使用百分比来控制动画进程 */25% {/*property1:value1*/transform: translateX(50%);}50% {transform: translateY(100%);}75% {transform: translateX(150%);}100% {transform: translateY(200%);}
}1.2 元素应用动画
给元素添加animation属性一般常用有三个属性
name 定义的动画名称time 动画持续时间liner 动画算法infinite是动画无限循环
#box {width: 100px;height: 100px;background-color: #f00;position: absolute;left: 0;top: 100px;/* name你定义的动画名称 time动画持续时间 liner动画算法 infinite动画无限循环*/animation: trans-auto 2s linear infinite;
}1.3 代码演示
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title动画/titlestyle#box {width: 100px;height: 100px;background-color: pink;position: absolute;left: 0;top: 100px;/* name定义的动画名称 time动画持续时间 liner动画算法 infinite动画无限循环*/animation: trans-auto 2s linear infinite;}keyframes trans-auto {/* from代表初始状态 */from {transform: translate(0%);}/* to代表结束状态 */to {transform: translate(200%);}}/style/headbody!-- 用keyframes来做过渡效果 自动动画 无需触发 --div idbox/div/body
/html
1.4 演示效果
我们可以看到粉色的方块进行无线地平滑运动。 2. 动画的其他属性
2.1 animation-timing-function
设置动画的类型常用的值如下
ease 平滑动画默认linear 动画线性过渡ease-in 从慢到快ease-out 从快到慢ease-in-out 先慢再快后慢step-start 等同于 steps(1, start)step-end 等同于 steps(1, end)cubic-bezie ( number, number, number, number) 特定的贝塞尔曲线类型 制作贝塞尔曲线的网页https://cubic-bezier.com/#.17,.67,.83,.67 2.2 animation-iteration-count
指定动画的播放次数 有两个值
number 动画循环次数infinite 无限循环 其他属性可以去MDN查看https://developer.mozilla.org/zh-CN/docs/Web
