让⼀个动画⼀直执⾏的属性是_css3动画讲解
前⾔：在CSS3中，动画效果有俩种⽅式：
第⼀种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进⾏平滑过渡来实现动画效果，因此只能实现简单
的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
第⼆种：animation 属性通过定义多个关键帧以及定义每个关键帧(@keyframes)中元素的属性值来实现复杂的动画效果。
过渡
transition
设置元素当过渡效果，可以实现元素不同状态间的平滑过渡，经常⽤来制作动画效果。
语法：transition: < property > < duration > < timing-function > < delay > ;
参数：
transition-property 语法
transition-duration 语法
transition-duration: time;
transition-timing-function 语法
js控制css3动画触发理解stepssteps 函数指定了⼀个阶跃函数第⼀个参数指定了时间函数中的间隔数量(必须是正整数)第⼆个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点
transition-delay 语法
1.1 过渡的缺点
transition的优点在于简单易⽤，但是它有⼏个很⼤的局限。
transition需要事件触发，所以没法在⽹页加载时⾃动发⽣。
transition是⼀次性的，不能重复发⽣，除⾮⼀再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有⼀个开始状态和结束状态。⼀条transition规则，只能定义⼀个属性的变化，不能控制多个属性。
Animation就是为了解决这些问题⽽提出的。
@keyframes简介
使⽤animation属性定义CSS3动画需要2步：
(1)定义动画 ；(@keyframes)
(2)调⽤动画；(animation)
在CSS3中，在使⽤动画之前，我们必须使⽤@keyframes规则定义动画。
语法：
我们可以使⽤@keyframes规则定义动画，但是这样定义的动画并不会⾃动执⾏，我们还需要“调⽤动画”，这样动画才会⽣效。其实这就跟JavaScript的函数⼀样，⾸先必须定义函数，然后只有调⽤函数，函数才会执⾏⽣效。
1.2 动画animation
说明：注意，animation-name 调⽤的动画名需要和@keyframes规则定义的动画名称完全⼀致(区分⼤⼩写)，如果不⼀致将不具有任何动画效果
如果动画合写的语法：animation: name duration timing-function delay iteration-count direction;
关键帧的⾃由定制案例：
执⾏多个动画案例：
Transform
transform属性应⽤于元素的2D或3D转换。字⾯上就是变形，改变的意思。这个属性允许将元素进⾏旋转，缩放，移动，倾斜等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。