使用css3动画属性实现动画的步骤是什么,css实现动画有哪些方式
一、是什么
CSS动画是级联样式表的推荐模块，它允许XML元素使用CSS动画。
即元素从一种风格逐渐过渡到另一种风格的过程。
常见的动画效果有很多，比如平移、旋转、缩放等。复杂动画是几个简单动画的组合。
实现css动画有几种方法：
过渡实现渐变动画变换变换动画实现自定义动画
二、实现方式
:
transition 实现渐变动画
过渡的属性如下：
属性：填写要更改的css属性持续时间：完成转场效果所需的时间单位(s或ms)timing-function:完成效果延迟的速度曲线：动画效果的延迟触发时间，其中timing-function的值如下：
值linear具有恒定的速度(等于三次贝塞尔曲线(0，0，1，1))，缓入从慢到快然后慢(三次贝塞尔曲线(0.25，0.1，0.25，1))，缓入慢慢变快(等于三次贝塞尔曲线(0.42，0，1) 1))。缓出慢慢变慢(等于三次贝塞尔曲线(0，0，0.58，1))，缓入淡出变快然后变慢(等于三次贝塞尔曲线(0.42
注意：并非所有属性都可以使用过渡，例如显示：无-显示：块。
比如实现鼠标上移时变化的动画效果。
style . base { width:100p x；高度：100px显示：内嵌-块；背景色：# 0 ea 9 ff；边框宽度：5px边框样式：纯色；边框-颜色：# 5daf34过渡属性：宽度、高度、背景颜色、边框宽度；过渡-持续时间：2s；过渡-计时-功能：淡入；过渡延迟：500毫秒；}/*缩写*//*过渡：all 2 ease-in 500 ms；*/.底座：hover {宽度：200px高度：200px背景色：# 5daf34边框宽度：10px边框颜色：# 3a8ee6}/stylediv/div
transform 转变动画
包含四个常用函数：
平移：置换比例：缩放旋转：旋转倾斜：倾斜通常过度用于过渡。
请注意，transform不支持内联元素，因此在使用之前将其转换为块。
例如
style . base { width:100p x；高度：100px显示：内嵌-块；背景色：# 0 ea 9 ff；边框宽度：5px边框样式：纯色；边框-颜色：# 5daf34过渡属性：宽度、高度、背景颜色、边框宽度；过渡-持续时间：2s；过渡-计时-功能：淡入；过渡延迟：500毫秒；} . base 2 { transform:none；transition-property:转换；过渡延迟：5毫秒；} . base 2:hover { transform:scale(0.8，1.5)rotate(35度)skew(5度)translate(15px，25px)；}/stylediv/div你可以看到盒子有旋转，倾斜，平移，放大。
animation 实现自定义动画
动画是8个属性的缩写，如下：
属性描述属性值动画持续时间指定动画完成一个周期所需的时间，单位为秒(s)或毫秒(ms)。默认值为0 animation-timing-function指定动画计时功能，即动画速度曲线。默认值为“ease”linear，easy，easy-in，ease-out，easy-in-out animation-delay以指定动画延迟时间，即动画开始的时间，默认值为0 animation-iteration-count以指定动画播放的次数。默认值为1动画方向，以指定动画播放的方向。默认为正常正常、反向、交替、交替-反向动画-填充模式，以指定动画填充模式。默认是无论坛，向后，动画播放状态来指定动画播放状态，运行或暂停。是默认运行running和pauser animation-name指定的@keyframes动画的名称。
CSS动画只需要定义一些关键帧，其余的帧会由浏览器根据计时功能进行插值。
使用@keyframes定义关键帧。
因此，如果我们希望元素旋转一次，我们只需要定义开始和结束帧：
@ keyframesrotate { from { transform:rotate(0 deg)；}到{transform:旋转(360 deg)；}}from表示开始帧，to表示结束帧。
你也可以用百分比来描述生命周期。
@ keyframesrotate { 0% { transform:rotate(0 deg)；} 50% {变换：旋转(180度)；} 100% {变换：旋转(360度)；}}定义了关键帧之后，下来就可以直接用了：
动画：rotate2s
三、总结
属性含义过渡(过度)用于过度设置元素的样式。和动画效果差不多，但细节上差别很大。transform(变形)用于旋转、缩放、移动或倾斜元素，与设置样式的动画无关。Translate，相当于color，用来设置元素的外观，只是transform的一个属性值，也就是用移动动画来设置动画属性。它是一个速记属性，包含6个以上的属性，是常见CSS3动画的实现细节。有关CSS3动画实现的更多信息，请关注其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。