CSS_过渡&动画

﹏ヽ暗。殇╰゛Y 2023-10-06 16:59 37阅读 0赞

## 过渡transition ##

> 过渡(transition)  
> \-通过过渡可以指定一个属性发生变化时的切换方式  
> \-通过过渡可以创建些非常好的效果，提升用户的体验

<style>
    	div{
         
    /*
    语法：transition：过渡的属性1,属性2,...,属性n  属性1持续时间，属性2持续时间
    */
    transition:height,width   2s,1s;
    
    
    /*分开设置：
    transition-property: 指定要执行过渡的属性*/
    transition-property: width, height; 
    
    /*transition-duration: 指定过渡效果的持续时间*/
    transition-duration: 2s;
    
    /*transition-timing-function: 过度的时序函数
    指定过渡的执行的方式
    	可选值:
    		-ease 默认值，慢速开始，先加速，再减速
    		-linear 匀速运动
    		-ease-in 加速运动
    		-ease-out 减速运动
    		-ease-in-out 先加速后减速
    		-cubic-bezier()来指定时序函数
    			https: //cubic-bezier.com 
    		-steps() 分步执行过渡效果
    			可以设置一个第二个值：
    				end ， 在时间结束时执行过渡(默认值)
    				start ， 在时间开始时执行过渡*/
    transition-timing-function: steps(2, start);
    transition-timing-function: cubic-bezier(.11, .8, 1, -0.52);
    
    /* transition-delay: 过渡效果的延迟，等待一段时间后再执行过渡 */
    transition-delay: 2s;
    
    /* transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续,第二个是延迟时间 */
    transition: 2s margin-left 1s;
    	}
    </style>

## 动画animation ##

> 通过关键帧设置动画执行的步骤

<style>
    div{
         
    /* animation-name: 要对当前元素生效的关键帧的名字*/
    	animation-name: test;
    /* animation-duration: 动画的执行时间*/
    	animation-duration:4s;
    /*动画的延时*/
    	animation-delay: 2s;
    /* animation-iteration-count动画执行的次数 
    		可选值：
    			次数；
    			infinite无限执行
    */
    /* animation-iteration-count: 2; 执行2次*/
    	animation-iteration-count:infinite;	
    /*
    animation-direction指定动画运行的方向
    	可选值:
    		normal默认值从from 向to运行 每次都是这样
    		reverse从to向from 运行每次都是这样
    		alternate从from 向to运行重复执行动画时反向执行
    		alternate-reverse从to向from运行重复执行动画时反向执行*/
    	animation-direction: alternate-reverse ;
    	
    /*
    animation-play-state:设置动画的执行状态
    	可选值:
    		running默认值动画执行
    		paused动画暂停
    */
    	animation-play-state:paused;
    	
    /* animation-fill-mode: paused; */
    /*
    animation-fill-mode:动画的填充模式
    	可选值:
    		none默认值动画执行完毕元素回到原来位置
    		forwards动画执行完毕元素会停止在动画结束的位置
    		backwards动画延时等待时，元素就会处于开始位置
    		both结合了forwards和backwards
    */
    	animation-fill-mode: backwards;
    	
    /*animation-timing-function: 动画的时序函数
    指定动画的执行的方式
    	可选值:
    		-ease 默认值，慢速开始，先加速，再减速
    		-linear 匀速运动
    		-ease-in 加速运动
    		-ease-out 减速运动
    		-ease-in-out 先加速后减速
    		-cubic-bezier()来指定时序函数
    			https: //cubic-bezier.com 
    		-steps() 分步执行过渡效果
    			可以设置一个第二个值：
    				end ， 在时间结束时执行过渡(默认值)
    				start ， 在时间开始时执行过渡*/
    animation-timing-function: steps(2, start);
    
    
    /*只有两个时间属性有顺序要求，其他属性没有顺序要求
    动画名 执行2S 执行2次 延迟1s  指定动画运行的方向...*/
    	animation:test 2s 2 1s alternate;
    }
    
     @keyframes 动画名字{
         
     /* from表示动画的开始位置,也可以使用0% */
    	from {
         
    			margin-top: 0;
    		}
    /* to动画的结束位置,也可以使用100%*/
    	to{
         
    		margin-bottmo: 90px;
    		} 
     }
     </style>

<style type="text/css">
            .box1 {
         
                width: 70px;
                height: 160px;
                margin: 0 auto;
                background-image: url(running.jpg);
                animation: run 1s steps(8) infinite;
            }
            /* 创建关键帧 */
            
            @keyframes run {
         
                from {
         
                    background-position: 0 0
                }
                to {
         
                    background-position: -600px 0;
                }
            }
        </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS_过渡&动画

过渡transition > 过渡(transition) > \-通过过渡可以指定一个属性发生变化时的切换方式 > \-通过过渡可以创建些非常好的效果，提升用户

﹏ヽ暗。殇╰゛Y/ 2023年10月06日 16:59/ 0 赞/ 38 阅读

相关 vue的过渡css动画

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2023年07月12日 03:45/ 0 赞/ 6 阅读

相关 CSS3-过渡动画

CSS3 中的 `transition` 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。 `transition` 属性是一个综合属性，可以简写也可以单独设

谁践踏了优雅/ 2023年07月02日 12:26/ 0 赞/ 146 阅读

相关 web前端学习7-css动画过渡

学习7-css动画过渡 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

待我称王封你为后i/ 2023年02月17日 05:05/ 0 赞/ 20 阅读

相关 CSS动画示例（上一篇是CSS过渡…）

![format_png][] ![format_png 1][] 大家好，欢迎来到雄雄的小课堂，前面，我们将CSS的变形和过渡都整理了，有需要的可以移步这里看： [CS

逃离我推掉我的手/ 2022年12月25日 02:49/ 0 赞/ 183 阅读

相关 CSS--过渡与动画

原文网址：[CSS--过渡与动画\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN] 贝塞尔曲线其他网址 > [实用的 CSS — 贝塞尔曲线(c

心已赠人/ 2022年12月23日 11:25/ 0 赞/ 205 阅读

相关 CSS3过渡和动画

1.过渡 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -web

怼烎@/ 2022年09月21日 05:37/ 0 赞/ 221 阅读

相关 CSS3之转换、过渡、动画

1、转换 1、转换的简介 1、什么是转换改变元素在页面中的形状，位置，大小，角度的一种效果在页面中允许实现 1、2D转换允许元素

小咪咪/ 2022年07月11日 01:41/ 0 赞/ 523 阅读

相关 CSS3 不执行 Transition 过渡动画

如果元素设置了transition，那么当 JavaScript 改变相应属性值的时候，就会触发该过渡动画。有时候，我们想直接设置该值，而不触发过渡动画，最直观的想法就是先

蔚落/ 2022年04月16日 02:14/ 0 赞/ 656 阅读

相关 css波浪音阶，过渡动画案例

css3过渡动画 <style> .box{ width: 225px;

喜欢ヅ旅行/ 2022年01月22日 23:25/ 0 赞/ 587 阅读