css动画效果 transform transition @keyframes animation 涉及jquery

1.transform: translateY(100px);

但是transform在单独使用的时候并不会产生动画效果，
页面加载的时候就已经在变化后的状态了，所以需要搭配transition使用，产生动画效果。

这种需要hover 给他一个事件才会发生这个动作

使用方法：

.a:hover{ transform: translateY(-50px); }

.a{ transition:all 1s ease-in-out 0.1s } 所有动画完成时间1s 变化曲线延迟0.1s
.a{ transition:all 1s 1s forwards } 当动画完成后，保持最后一个属性值

注意 linear 可以让旋转没间隙

1.transition: 设置过渡效果的 CSS 属性的名称(width, height, left, right或者用all表示所有属性都可以)
2.完成过渡效果需要多少秒或毫秒 (2s)
3.规定速度效果的速度曲线 (linear匀速\ease慢快慢\eare-in慢快\eare-out快慢\ease-in-out慢快慢,和eare速度上有差异)，这个属性还可以使用cubic-bezier(n,n,n,n)自己定义，n的范围在0-1之间。
4.定义过渡效果何时开始(2s)

2 用jquery控制 css方式做动画

1. 点击增加clss 关闭删除css

<script>$("span").click(function () {$("div").addClass("donghua")})$(".close").click(function () {$("div").removeClass("donghua")})</script>

2.　　可以用 scale 从0到1的方式变换，也可以改变width和height方式变化注意配合 transition

.less{width: 10px;height: 10px;background-color: red;transform: scale(1);transition: all 0.5s;box-shadow: 100px 100px black 10px;}.donghua{transform: scale(1);width: 400px;height: 400px;display: block;opacity: 1;transform-origin:100px 100px ;}

3.定义动画

@keyframes move-h1{
0% {transform: rotate(0deg); color: blue;}
50% {transform: rotate(360deg); color: orange;}
100% {transform: rotate(720deg); color: blue;}

}

.class{
animation: move-h1 10.5s ease-in-out forwards } 当动画完成后，保持最后一个属性值

animation: quan 3s infinite linear;

知识点：transform: rotate3d(0, 1,0, 90deg);可以隐藏元素4.transform-origin旋转基点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0;margin: 0;list-style: none;    }.na{perspective:1000px;background-color: red;text-align: center;width: 440px;height:30px;border: 1px solid black;margin-bottom: 20px;}.nav li{border: 10px solid blue;width: 440px;height: 30px;margin-top:20px;text-align: center;background-color: orange;}body>ul{margin-left: 100px;}.nav li{transform: rotate3d(0, 1,0, 90deg);transition: all .6s;}.na:hover .nav li{transform: rotate3d(0, 1, 0, 0deg);}.nav li:nth-child(1) {transition-delay: 0ms;
}
.nav li:nth-child(2) {transition-delay: 100ms;
}
.nav li:nth-child(3) {transition-delay: 200ms;
}
.nav li:nth-child(4) {transition-delay: 300ms;
}
.nav li:nth-child(5) {transition-delay: 400ms;
}
.nav li:nth-child(6) {transition-delay: 500ms;
}</style>
</head>
<body><ul><li class="na">展示<ul class="nav"><li>01</li><li>2</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></li></ul>
<p>看是否影响下面的位置<看是否影响下面的位置<看是否影响下面的位置<看是否影响下面的位置<看是否影响下面的位置<看是否影响下面的位置</p></body>
</html>

5.动画补充

　　给背景做渐变并且移动：

思路： background 设置渐变 45deg，red20%, 40%
background-size:400%；
background-position：0% 100%

动画做到到 background-position：100% 0%

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><style>body,html{width: 100%;height: 100%;margin: 0}.wrap{width: 100%;height: 100%;background:linear-gradient(45deg,#394280 25%,#7820B1 50%,#E410DE 75%,#ED0639 100%);  background-size: 400%;background-position:  0% 100%; animation: move 10.5s infinite;}@keyframes move{0%{background-position:  0% 100%;}50%{background-position:  100% 0%;}100%{background-position:  0% 100%;}}.wrap div{width: 200px;height: 200px;border: 1px solid #000;display: inline-block;position: fixed;}.ani .box:nth-child(1){-webkit-animation-delay:3.5s!important;}.wrap div:nth-child(1){left: 38.7%;top:51%;}.ani .box:nth-child(2),.wrap div:nth-child(2){background: red;left: 44.7%;top:52%;animation-delay:3.5s!important;}.ani .box:nth-child(3),.wrap div:nth-child(3){background: pink;left: 57.7%;top:52.6%;animation-delay:3s!important;}.wrap div::after{content: "";display: inline-block;width: 20px;height: 20px;background-color: white;border-radius: 50%;}.box{transform: rotateZ(0deg);animation: circle 2s linear 1;}@keyframes  circle{0%{transform: rotateZ(0deg);}50%{transform: rotateZ(180deg);}100%{transform: rotateZ(360deg);}}p{font-size: 60px;position: absolute;left: 50%;top: 50%;color: white;transform: translate(-50%, -50%)}.ani .box{transform: rotateZ(0deg);animation: circle 2s linear infinite;}</style>
</head>
<body><div class="wrap"><div class="box"></div><div class="box"></div><div class="box"></div><p>loading</p></div>
<script>
setTimeout(function () {$(".wrap").addClass("ani")
},3000)
</script></body>
</html>

转载于:https://www.cnblogs.com/nice2018/p/9714021.html

css动画效果 transform transition @keyframes animation 涉及jquery相关推荐

css动画效果之transition
transition-property 规定设置过渡效果的 CSS 属性的名称. 属性名属性值 none 没有属性会获得过渡效果. all 所有属性都将获得过渡效果. property 定义应用过渡 ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
CSS动画效果构成分析
CSS动画特效的基本构成文章目录 CSS动画特效的基本构成 CSS动画效果一.动画轨迹,运动路径 1.规定目标样式属性transfrom: 二.控制运动路径 transition animati ...
CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
css动画效果：鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...
【每日一练】134—一个好玩有趣的CSS 动画效果
今天这个练习是一个用纯CSS实现的动画效果,非常有趣,大家可以看一下它的最终效果: HTML代码: <!doctype html> <html><head>< ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...

css动画效果 transform transition @keyframes animation 涉及jquery

css动画效果 transform transition @keyframes animation 涉及jquery相关推荐

最新文章

热门文章