css3 Animation ,transform,keyframess属性以及实例

最新推荐文章于 2023-11-24 23:58:25 发布
最新推荐文章于 2023-11-24 23:58:25 发布
阅读量1.1k 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_chenli/article/details/51862292
版权

      现在前端的很多网站都有动态效果，banner图上的内容也是弹入淡出，不会js的小伙伴就学学Animation ,transform,keyframess属性吧 非常实用。学了几天总结出来的内容就是一下几点。


1.   Animation 动画属性

Animation-name:规定需要绑定选择去@keyframe名称

Tweenedanimation的分类

Alpha：谈入弹出效果

Scale：缩放效果

Rotate：旋转效果

Translate：移动效果

1.1.    实例

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>

</html>

 

 

 

 

@keyframe name(name=animation:name){

From{}

To{}

}

 

2.   Transform属性

Transform属性向元素应用2D或3D转换。该属性允许我们元素进行旋转，缩放，移动或是倾斜。

2.1.    语法：

Transform：rotate (10deg); //deg度

Transform的属性包括：rotate（）/skew()/scale()/translate(),f分别还有X,Y,之分，比如:rotate()和rotateY(),以此类推。

 

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

.demo_transform1{

-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()：

含义：倾斜；

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

 

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

 

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

 

 

 

3.   keyframes  属性

3.1.    语法

@keyframes animationName{ keyframes-selector{css-styles}}

animationName:必须。 定义动画的名称

keyframes-selector:必须。动画时长度的百分比。

                                合法值：

                                .0-100%

                                .from（与0%相同）to(与100%相同)

Css-styles:必须。一个或是多个合法的css样式。

3.2.    实例

Css

.b_seation{

         width: 1000px;

         height:auto;

         position:relative;

         top: 300px;

         left:0px;

         background: #FF0000;

}

.b_seation h2{ font-size: 100%; color: #FFFFFF; line-height: 40px;text-align: left;

          display: block; padding: 10px 30px;}

.b_seation p{

        width: 100%;

        height: auto;

        line-height: 30px;

        font-size: 16px;

        color: #FFFFFF;

         text-align: left;

          display: block;

          margin: 10px 0px;

          padding: 40px 30px;

}

 

 

 

 

@keyframes

#b_s_1{

        animation: animationH 10s;

        -moz-animation: animationH 10s ;

        -webkit-animation:  animationH 10s;  

}

#b_s_2{

        animation: animationG 10s;

        -moz-animation: animationG 10s ;

        -webkit-animation:  animationG 10s;  

}

@keyframes animationH{

        0%{ opacity: 0;

        transform:  translate(200px,0);

        -moz-transform:  translate(200px,0);

        -webkit-transform:  translate(200px,0);

        }

        50%{ opacity: 0.5;}

        100%{

                opacity: 1;

                transform:  translate(0,0);

                -moz-transform:  translate(0,0);

                -webkit-transform:  translate(0,0); }           

}

@keyframes animationG{

        0%{ opacity: 0;

        transform:  translate(-200px,0);

        -moz-transform:  translate(-200px,0);

        -webkit-transform:  translate(-200px,0);

        }

        50%{ opacity: 0.5;}

        100%{

                opacity: 1;

                transform:  translate(0,0);

                -moz-transform:  translate(0,0);

                -webkit-transform:  translate(0,0);

                }

}

Html

<div class="b_seation">

    <h2 id="b_s_1">transform的介绍</h2>

    <p id="b_s_2">

    transform的属性向 元素应用2D或是3D旋转。该属性允许我    们元素进  行旋转，缩放，移动或是倾斜。rotate(<angle>) ：通过指定的角度参数对原元素指定一个 2D rotation （2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设 置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

    </p>

</div>

 

 

参照学习网站：http://caibaojian.com/transform.html

                            http://www.runoob.com/cssref/css3-pr-animation-keyframes.html

                            http://www.daqianduan.com/2959.html



















































































































































































































csdn_chenli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 animation动画
04-15
总结，CSS3的`animation`、`transform`和`@keyframes`提供了强大的工具，让开发者能够创建出丰富多样的交互式网页元素，极大地提升了网页的视觉吸引力和用户体验。熟练掌握这些技术，可以让你的网站设计更加生动有趣...
CSS动画 animation与transition
tangem的博客
05-23 459
一、区分容易混淆的几个属性和值 　　先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。 　　CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matr...
@keyframes、transform详解与实例
u011558902的专栏
09-05 2万+
转自文章  https://segmentfault.com/a/1190000004460780#articleHeader5 一、transform 和@keyframes动画的区别： @keyframes动画是循环的，而transform 只执行一遍. 二、@keyframes CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animati
@keyframes、transform、animation详解
qq_45629121的博客
02-09 1502
@keyframes、animation与transform详解
超详细 CSS动画-animation
热门推荐
欢迎访问我的主页：https://www.bookbook.cc
03-17 3万+
css3 animation @keyframes
css动画里面transition和transform以及animation和和keyframes几个属性的区别，以及语法格式
最新发布
Jason_from_China的博客
11-24 1764
TRANSTION
纯css3 animation动画属性点击loading加载动画提示框效果代码.zip
08-18
在这个名为"纯css3 animation动画属性点击loading加载动画提示框效果代码.zip"的压缩包中，我们可以预见到一个利用CSS3的animation属性创建的交互式加载提示框的示例。 动画在现代网页设计中扮演着至关重要的角色，...
css3 transform属性制作线条的3D爱心动画demo.zip
02-17
本示例中的"css3 transform属性制作线条的3D爱心动画demo.zip"就是一个利用CSS3的transform属性来创建一个3D爱心动画的实例。这个压缩包包含了一个简单的HTML文件，可以无需任何额外的软件或库，在电脑上直接打开...
CSS3 Animation文字动画特效.zip
07-11
在IT领域，CSS3 Animation是一种强大的技术，用于创建动态、交互式的网页元素，尤其是文字动画特效。本资源“CSS3 Animation文字动画特效.zip”提供了一系列精心设计的文字动画，旨在为网页增加视觉吸引力，提升用户...
css3 animation白天黑夜城市变化动画场景
09-13
可能会用到`transform`属性进行位移、旋转、缩放等操作，以及`opacity`来控制元素的透明度，模拟日出日落的光照变化。 此外，可能还需要考虑不同浏览器的兼容性问题，确保动画在各大主流浏览器上都能正常工作。这...
CSS进阶之形变与动画 (一)：transform、垂直居中总结、transition动画、animation动画、vertical-align
Good Good Study,Day Day Up!
05-30 8156
水平居中的方案行内级元素：设置父元素的 text-align:center块级元素：设置当前块级元素(要有宽度) margin:0 auto绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；flex布局：通过设置justify-content: center;垂直居中的方案绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;flex布局 通过设置align-
CSS3动画-transition、animation、transform（translate/scale/rotate）
03-19 3406
目录 一、transition（过渡） 1、transition-duration 2、transition-property 3、transition-timing-function 4、transition-delay 二、animation 1、@keyframes 2、animation-timing-function 3、animation-delay 4、animation-iteration-count：检索或设置对象动画的循环次数 5、animation-pla...
CSS3之动画(animation)和四个小案例
al654123的博客
03-08 2442
一、动画(animation) 1.动画概述 可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。 2.语法 1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。 2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画 3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。 @keyframes...
讲解 CSS 过渡和动画 — transition/animation (很全面)
CRMEB小程序商城的博客
10-16 2774
由于用户越来越注重Web应用的使用体验，随之而来的是Web应用需要提供了更加完善的Web 动画效果来实现以平滑的状态贯穿于用户的整个使用过程中。现在，这已经是司空见惯了，用户潜意识是希望可以获得更快的反馈响应和更友好的用户界面。屏幕刷新率设备显示器每秒绘制新图像的次数，其单位为赫兹 (Hz)。目前大多数设备为 60Hz。卡顿每个帧的预算时间仅比16毫秒多一点（1秒/ 60 = 16.6毫秒如果浏览器无法在这一帧内完成工作，则帧率将下降，可能导致跳帧，内容会在屏幕上抖动。此现象通常称为卡顿。跳帧。
css 实现动画的三种方式: transition 过渡、 transform 变形、 animation 关键帧动画
莉莉的博客
05-23 2415
1.transition 过渡动画： 1. 语法: 1. transition: 属性是个复合属性 。 2. transition: property duration timing-function delay 3. 默认值为: transition: all 0 ease 0; ​ 2. 属性介绍: 1. transition-property: 规定设置过渡效果的 css 属性名称 。 2. transition-duration: 规定完成过渡效果需
css3中的变形（transform）、过渡(transtion)、动画(animation)
11-04 726
Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。是构成transti...
CSS中的transform、transition和animation基本用法
pfzzzzz的博客
11-20 609
transform CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。 注意： inline元素是不支持 transform，需要编程block 常用的功能属性 位移 translate 缩放 scale 旋转 rotate 位移 translate 常用写法 translate( <length-percentage> , <length-percentage>? ) translateX( <le
CSS3动画，过渡效果animation、@keyframes、transform、transition
Yuyao_Xu的博客
09-01 1318
CSS3 @keyframes 规则 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 浏览器支持 Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 ...
CSS3中的变形、过渡、动画属性讲解
web前端开发教程htmlcssjs
11-06 2382
css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。 一、 CSS3变形（transform） 语法： transform ： none | <transform-function> [ <transform-function> ]* 也就是： transform: rotate | scal...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值