Css animation/jquery animation/velocity animation
How do I make an css animation/jquery animation/velocity animation?
What is a css animation/jquery animation/velocity animation? How do you make a css animation/jquery animation/velocity animation? This script and codes were developed by Tomothumb on 11 September 2022, Sunday.
Css animation/jquery animation/velocity animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css animation/jquery animation/velocity animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="btnstart" class="btn">スタート</button>
<button id="btnreset" class="btn">リセット</button>
<div class="block"> <h3>CSS transition(Event:transitionend)でアニメーションをつなぐ(IE10+)</h3>
<div id="anime1" class="box"><p>CSS transition: Scene1</p></div>
<div id="anime2" class="box"><p>CSS transition: Scene2</p></div>
<div id="anime3" class="box"><p>CSS transition: Scene3</p></div>
</div>
<hr>
<div class="block"> <h3>$().animate()でアニメーションをつなぐ</h3>
<div id="anime4" class="box"><p>$().animate(): Scene2</p></div>
<div id="anime5" class="box"><p>$().animate(): Scene5</p></div>
<div id="anime6" class="box"><p>$().animate(): Scene6</p></div>
</div>
<hr>
<div class="block"> <h3>$().velocity()でアニメーションをつなぐ (<a href="http://julian.com/research/velocity/">http://julian.com/research/velocity/</a>)</h3> <p>jQueryAnimateでは操作出来ないcolorも変更できる。</p>
<div id="anime7" class="box"><p>$().velocity(): Scene7</p></div>
<div id="anime8" class="box"><p>$().velocity(): Scene8</p></div>
<div id="anime9" class="box"><p>$().velocity(): Scene9</p></div> </div>
<ul> <li>CSSアニメーションの完了イベント(transitionend/MSTransitionEnd/webkitTransitionEnd/oTransitionEnd)は、<br>変更したCSSプロパティの個数の回数呼ばれる。<br> 「margin,padding,color」を変更した場合は、3回イベントが発火する。<br> 回避方法:<br> $("#xxx").off('transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd')してあげる。</li> <li>※CSS3を動的にはサワレナイ。<br> 触る場合は、stepプロパティ($("#xxx").animate({....},{step:function(){...},dulation:1000}))を指定するか、<br> CSSで、transitionを指定しておき、$("#xxx").css({....})とでアニメーションさせる。</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/tomothumb/css-jquery-pixi-AnimationDemo/master/bower_components/velocity/velocity.min.js'></script>
<script src='https://cdn.rawgit.com/tomothumb/css-jquery-pixi-AnimationDemo/master/bower_components/velocity/velocity.ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Css animation/jquery animation/velocity animation - Script Codes CSS Codes
.block{ padding: 30px; } .btn{ padding: 10px 20px; } .box{ padding: 10px; width: 20%; height: 30px; margin-bottom: 5px; background-color: #CCCCCC; color:#000000; } #anime1, #anime2, #anime3{ transition: all 1s ease; } #anime1.anime-start, #anime2.anime-start, #anime3.anime-start{ width: 100%; color:#CC0000; background-color:#CC9999; }
Css animation/jquery animation/velocity animation - Script Codes JS Codes
$(function(){ var TRANSITIONEND = "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd"; // Using Css Animation var afterAnime1 = function(){ console.log('anime1-end'); $("#anime1").off(TRANSITIONEND); $("#anime2").addClass("anime-start"); }; var afterAnime2 = function(){ console.log('anime2-end'); $("#anime2").off(TRANSITIONEND); $("#anime3").addClass("anime-start"); }; var afterAnime3 = function(){ console.log('anime3-end'); $("#anime3").off(TRANSITIONEND); }; var cssanimesetting = function(){ $("#anime1").on(TRANSITIONEND, afterAnime1); $("#anime2").on(TRANSITIONEND, afterAnime2); $("#anime3").on(TRANSITIONEND, afterAnime3); }; cssanimesetting();
// jQueryとVelocityで変更してみるCSSプロパティ var afterCssProperty = { 'width' : '100%', 'color' :'#CC0000', 'background-color':'#CC9999' }; // Using jQuery Animation var anime4 = function(){ $("#anime4").animate(afterCssProperty,1000,'swing',anime5); }; var anime5 = function(){ $("#anime5").animate(afterCssProperty,1000,'swing',anime6); }; var anime6 = function(){ $("#anime6").animate(afterCssProperty,1000,'swing'); }; // Using velocity var anime7 = function(){ $("#anime7").velocity(afterCssProperty,1000,'swing',anime8); }; var anime8 = function(){ $("#anime8").velocity(afterCssProperty,1000,'swing',anime9); }; var anime9 = function(){ $("#anime9").velocity(afterCssProperty,1000,'swing'); };
// 実行 $("#btnstart").click(function(){ cssanimesetting(); $("#anime1").addClass("anime-start"); anime4(); anime7(); });
// リセット $("#btnreset").click(function(){ $('.box').removeClass('anime-start'); $('.box').attr('style',''); }); });
Developer | Tomothumb |
Username | tomothumb |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 3,069 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Speech bubbles | Something | 1,547 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Border image | JohnRiordan | 2,120 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Price | Catcode | 2,623 Kb |
Super Discount | Orrinward | 3,225 Kb |
Nice textured background | Hans | 2,659 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!