简析transform,transition,animation,@key frames的关系

最新推荐文章于 2023-12-07 16:20:35 发布

alisaGreen

最新推荐文章于 2023-12-07 16:20:35 发布

阅读量1.2k

点赞数

文章标签： transition animation css3 transform key-frames

本文链接：https://blog.csdn.net/bluefish_flying/article/details/50951732

版权

这是基于慕课网10天精通css3教程后想写的内容；

引用w3c中的概念： transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。（scale(x,y)变形-缩放、变形--位移 translate(x,y)，transform-origin表示元素的一个中心点、rotate(ndeg)旋转）,顾名思义就是可以通过设置transform的属性来让元素产生以上的效果。

transition,过渡效果，transiton主要针对的是transform里面的几个属性和css里面的属性变化（eg:width、left opacity background等属性），然后再通过hover里面或者是其他情况调用实现这个过渡变化，然后在这个模块直接调用这个方法

我理解的就是将还没有做改变之前的效果和做了改变之后的效果的桥梁，让我们得以看到整个变化的过程，产生动画效果。这里就不一一说他的属性了，直接放一个例子吧。不过transition除了transform外基于样式的一个过渡效果。

eg:

   <!DOCTYPE HTML>
<htmllang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>CSS3 </title>
        <style type="text/css">
           a{
            display: block;
            width:200px;
            line-height:50px;
            font-size:30px;
            background: red;
            text-align: center;
            text-decoration:none;
            color:#fff;
            margin:100px auto;
            /* -webkit-transition:transform 3s ease .5s;    这是直接用transform定义属性样式和后面注释的一对就可以产生神奇的效果哦，他们都有兼容性这里只写了webkit的就请谅解了*/
            -webkit-transition:border-radius 3s ease .5s; --这是transition对border-radius属性的过渡这里用正方形或者变个颜色，看起来效果会更好，试过了用两个不行，原谅我只看了几天的css3以前虽有接触但是没怎么总结
           }
           a:hover{
            /*-webkit-transform:rotate(40deg) translate(100px);*/
            border-radius: 50%;
           }
        </style>
   </head>
    <body>
       <a href='#'>看我看我</a>
    </body>

</html>

animation针对的是通过keyframe定义的方法名里面的过渡效果，animation 则是属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画。

animation是一系列的动画效果，没记错的话JQ好像有专门的animate运动。这里就写一个简单的吧，因为这个应该要和js结合使用，我就举一个纯css3就能实现的效果吧，也是今晚才get到的。这里就截取部分代码了，因为整个结构还是挺多的。这个例子是慕课网上的，我觉得挺好的，这里纠结了半天：target选择器来着.....-target :target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。相当于通过锚点<a href='#box'></a><div id='box'></div> 点击链接来控制#box的样式运动。。。

html: <li><a href="#bg5">Lips so kissable I could die ...</a></li>

css3:

   --设置他的transform属性
            @-webkit-keyframes 'rotate' {    --这里的动画名要用引号哦，必须和前面的一样才可以呢
                  0% { -webkit-transform: rotate(-360deg) scale(0.1); }
                  100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'rotate' {
                  0% { -moz-transform: rotate(-360deg) scale(0.1); } --这里的0%相当于from的意思100%相当于to的意思，也就是说从某种状态到某种状态的过程
                  100% { -moz-transform: none; }
            }
            @-ms-keyframes 'rotate' {
                  0% { -ms-transform: rotate(-360deg) scale(0.1); }
                  100% { -ms-transform: none; }
            }
            @-o-keyframes 'rotate' {
                  0% { -o-transform: rotate(-360deg) scale(0.1); }
                  100% { -o-transform: none; }
            }
            @keyframes 'rotate' {
                  0% { transform: rotate(-360deg) scale(0.1); }
                  100% { transform: none; }
            }

--这里通过找到 #bg5 找到id='bg5'的div并且对他进行过渡

.rotate:target{
                  z-index: 100;
                  -webkit-animation: rotate 1s 1;
                 /* -webkit-animation-duration: 1s;
                  -webkit-animation-iteration-count: 1;
                  -moz-animation-name: rotate;
                  -moz-animation-duration: 1s;
                  -moz-animation-iteration-count: 1;
                  -ms-animation-name: rotate;
                  -ms-animation-duration: 1s;
                  -ms-animation-iteration-count: 1;
                  -o-animation-name: rotate;
                  -o-animation-duration: 1s;
                  -o-animation-iteration-count: 1;
                  animation-name: rotate;
                  animation-duration: 1s;
                  animation-iteration-count: 1;*/ 这里可以简写我也只简写了webkit的
            }

然后看看css的其他样式就ok了啊，这里的注释符有些是乱用的，但是整体的意思表达出来了，后面就研究怎么用js让动画动出来吧。

alisaGreen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简析transform,transition,animation,@key frames的关系

这是基于慕课网10天精通css3教程后想写的内容；引用w3c中的概念： transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。（scale(x,y)变形-缩放、变形--位移 translate(x,y)，transform-origin表示元素的一个中心点、rotate(ndeg)旋转）,顾名思义就是可以通过设置tra
复制链接

扫一扫