本文主要讲解“CSS动画过渡与动画分析”。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习《CSS动画过渡与动画解析》！
差异比较
CSS3微分过渡在给定的持续时间内平滑地改变属性值(从一个值到另一个值)，也就是只需指定开始和结束参数，当参数改变时就会触发动画。常用短语鼠标事件(:悬停、活动、聚焦、点击)或键盘输入需要事件触发，这在加载网页时不会自动发生。一次，不可能反复发生，除非一次又一次的触发。只能定义开始状态和结束状态，不能定义中间状态。动画可以自己写动画开头、期间、结尾各阶段的变化，适合更细微的动画表现。您需要明确指定关键帧(@keyframe)的参数。网页加载后会直接执行，可以自己控制每个阶段的动画变化。动画和转场最大的区别是参数变化时触发转场，而动画直接执行。所有动画效果都需要明确指定关键帧的参数。
CSS3缩写顺序转换属性名称计时-功能特效动画名称计时-功能特效迭代-计数次数填充模式填充模式
浏览器支持
10-1010.box {
宽度width:100px
高度：100 px；
背景-颜色：紫色；
跃迁：宽度2秒；
}
. box:hover{
宽度width:200px
高度：200 px；
背景色：红色；
}
transition写法
.方框{
宽度width:100px
高度：100 px；
border:1pxsolid # ccc
动画师： change 5s；/* 8个属性中必须至少有名称和时间*/
}
/*设置开始和结束状态*/
/*从是0%，到是100%*/
@keyframeschange{
来自{
背景色-: # 4BC0C 8；
}
到{
背景-color : # C779 D0；
}
}.方框{
宽度width:100px
高度：100 px；
border:1pxsolid # ccc
动画师： change 5s；/* 8个属性中必须至少有名称和时间*/
}
/*设置开始和结束状态*/
/*从是0%，到是100%*/
@keyframeschange{
0%{
背景色-: # 4BC0C 8；
}
20%{
背景-color : # C779 D0；
}
60%{
背景色-: # FEAC5E；
}
80%{
背景-color : # 185 a9d；
}
100%{
背景色-: # 4BC0C 8；
}
}属性值动画后的名称-名称@关键帧动画-持续时间时间以秒为单位。比如3s initial inherit的预设值继承了动画-计时-函数的特殊效果，比如线性等速、缓和、缓和、缓和、缓和、缓和、步进-开始、步进-结束、步进(int、Start/end)、三次bezier(n，n，n，n)都可以用动画-延时以秒为单位计算，比如2sanimation-iteration-count的默认值为1，那么当填入2时，动画运行的次数为1 ^ 2=3次。无限无限循环动画-方向法线，方向反转，Alternate animation-fill-mode forwards使用关键帧的最后一个值向后使用初始值bothanimation-play-state播放状态pause running作为默认值初始默认值，继承继承继承父层在这里，相信大家对“解析CSS动画的Transition和Animation”有了更深的理解，那么就让我们来一个实际操作吧！这是网站。更多相关内容，可以去相关渠道查询，关注我们，继续学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/73040.html